{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "name": "@kubex/zinc",
  "version": "1.0.102",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "zn-absolute-container",
          "description": "The absolute container will take the total inner height of the content (positioned absolute), and set that\nas it's min height, Creating enough space to show the content.\n---\n\n\n### **Slots:**\n - _default_ - The default slot",
          "doc-url": "",
          "attributes": [],
          "slots": [{ "name": "", "description": "The default slot" }],
          "events": [],
          "js": { "properties": [], "events": [] }
        },
        {
          "name": "zn-alert",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "collapse",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "level",
              "value": {
                "type": "'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'",
                "default": "'info'"
              }
            },
            {
              "name": "size",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "caption", "type": "string" },
              { "name": "collapse", "type": "boolean" },
              {
                "name": "level",
                "type": "'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'"
              },
              { "name": "size", "type": "'small' | 'medium' | 'large'" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-action-bar",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-animated-button",
          "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
          "doc-url": "",
          "attributes": [
            {
              "name": "idle-text",
              "description": "The text to display in the idle state",
              "value": { "type": "string", "default": "'Purchase'" }
            },
            {
              "name": "processing-text",
              "description": "The text to display in the processing state",
              "value": { "type": "string", "default": "'Purchasing'" }
            },
            {
              "name": "success-text",
              "description": "The text to display in the success state",
              "value": { "type": "string", "default": "'Success'" }
            },
            {
              "name": "failure-text",
              "description": "The text to display in the failure state",
              "value": { "type": "string", "default": "'Failed'" }
            },
            {
              "name": "redirect-url",
              "description": "The URL to redirect to after successful purchase",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "redirect-delay",
              "description": "Delay in milliseconds before redirecting after success (default: 1500ms)",
              "value": { "type": "number", "default": "1500" }
            },
            {
              "name": "failure-reset-delay",
              "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)",
              "value": { "type": "number", "default": "2000" }
            },
            {
              "name": "disabled",
              "description": "Disabled state",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "name",
              "description": "The name of the form control (required for form submission)",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The value of the form control",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "idleText",
                "description": "The text to display in the idle state",
                "type": "string"
              },
              {
                "name": "processingText",
                "description": "The text to display in the processing state",
                "type": "string"
              },
              {
                "name": "successText",
                "description": "The text to display in the success state",
                "type": "string"
              },
              {
                "name": "failureText",
                "description": "The text to display in the failure state",
                "type": "string"
              },
              {
                "name": "redirectUrl",
                "description": "The URL to redirect to after successful purchase",
                "type": "string"
              },
              {
                "name": "redirectDelay",
                "description": "Delay in milliseconds before redirecting after success (default: 1500ms)",
                "type": "number"
              },
              {
                "name": "failureResetDelay",
                "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)",
                "type": "number"
              },
              {
                "name": "disabled",
                "description": "Disabled state",
                "type": "boolean"
              },
              {
                "name": "name",
                "description": "The name of the form control (required for form submission)",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The value of the form control",
                "type": "string"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-audio-select",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **actions** - The actions slot.\n- **footer** - The footer slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "value", "value": { "type": "string", "default": "''" } },
            { "name": "label", "value": { "type": "string", "default": "''" } },
            {
              "name": "placeholder",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "files",
              "value": { "type": "AudioFile[]", "default": "[]" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "actions", "description": "The actions slot." },
            { "name": "footer", "description": "The footer slot." }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "value", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "placeholder", "type": "string" },
              { "name": "files", "type": "AudioFile[]" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-bulk-actions",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "PropertyKey" } },
            {
              "name": "actions",
              "value": { "type": "BulkActionData", "default": "[]" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "container", "type": "HTMLDivElement" },
              { "name": "addRule", "type": "ZnSelect" },
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "PropertyKey" },
              { "name": "actions", "type": "BulkActionData" },
              { "name": "validationMessage", "type": "string" },
              { "name": "validity", "type": "ValidityState" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-button",
          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
          "doc-url": "",
          "attributes": [
            {
              "name": "color",
              "value": {
                "type": "'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star'",
                "default": "'default'"
              }
            },
            {
              "name": "size",
              "value": {
                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "text",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "outline",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "grow",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "square",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "dropdown-closer",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "notification", "value": { "type": "number" } },
            {
              "name": "muted-notifications",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "verticalAlign",
              "value": { "type": "'start' | 'center' | 'end'" }
            },
            {
              "name": "content",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            { "name": "gaid", "value": { "type": "string", "default": "''" } },
            {
              "name": "icon-position",
              "value": { "type": "'left' | 'right'", "default": "'left'" }
            },
            { "name": "icon-size", "value": { "type": "string" } },
            { "name": "icon-color", "value": { "type": "IconColor" } },
            {
              "name": "type",
              "value": { "type": "'button' | 'submit' | 'reset'" }
            },
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "string" } },
            { "name": "form", "value": { "type": "string" } },
            { "name": "formaction", "value": { "type": "string" } },
            {
              "name": "formenctype",
              "value": {
                "type": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'"
              }
            },
            { "name": "formmethod", "value": { "type": "'post' | 'get'" } },
            { "name": "formnovalidate", "value": { "type": "boolean" } },
            {
              "name": "formtarget",
              "value": {
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              }
            },
            { "name": "href", "value": { "type": "string" } },
            {
              "name": "target",
              "value": {
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              }
            },
            {
              "name": "data-target",
              "value": { "type": "'modal' | 'slide' | string" }
            },
            {
              "name": "rel",
              "value": { "type": "string", "default": "'noreferrer noopener'" }
            },
            { "name": "tooltip", "value": { "type": "string" } },
            {
              "name": "auto-click",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "auto-click-delay",
              "value": { "type": "number", "default": "2000" }
            },
            {
              "name": "loading-text",
              "value": { "type": "string", "default": "'Loading...'" }
            },
            {
              "name": "loading-text-position",
              "value": {
                "type": "'left' | 'right' | 'center' | string",
                "default": "'center'"
              }
            },
            {
              "name": "loading",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The button's label." },
            {
              "name": "prefix",
              "description": "A presentational prefix icon or similar element."
            },
            {
              "name": "suffix",
              "description": "A presentational suffix icon or similar element."
            },
            {
              "name": "cancel",
              "description": "Slot for custom cancel button/content when autoClick is active."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the button loses focus."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the button gains focus."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "button", "type": "HTMLButtonElement" },
              { "name": "countdownContainer", "type": "HTMLElement[]" },
              {
                "name": "color",
                "type": "'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star'"
              },
              {
                "name": "size",
                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
              },
              { "name": "text", "type": "boolean" },
              { "name": "outline", "type": "boolean" },
              { "name": "disabled", "type": "boolean" },
              { "name": "grow", "type": "boolean" },
              { "name": "square", "type": "boolean" },
              { "name": "dropdownCloser", "type": "boolean" },
              { "name": "notification", "type": "number" },
              { "name": "mutedNotifications", "type": "boolean" },
              { "name": "verticalAlign", "type": "'start' | 'center' | 'end'" },
              { "name": "content", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "gaid", "type": "string" },
              { "name": "iconPosition", "type": "'left' | 'right'" },
              { "name": "iconSize", "type": "string" },
              { "name": "iconColor", "type": "IconColor" },
              { "name": "type", "type": "'button' | 'submit' | 'reset'" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "form", "type": "string" },
              { "name": "formAction", "type": "string" },
              {
                "name": "formEnctype",
                "type": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'"
              },
              { "name": "formMethod", "type": "'post' | 'get'" },
              { "name": "formNoValidate", "type": "boolean" },
              {
                "name": "formTarget",
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              },
              { "name": "href", "type": "string" },
              {
                "name": "target",
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              },
              { "name": "dataTarget", "type": "'modal' | 'slide' | string" },
              { "name": "rel", "type": "string" },
              { "name": "tooltip", "type": "string" },
              { "name": "autoClick", "type": "boolean" },
              { "name": "autoClickDelay", "type": "number" },
              { "name": "loadingText", "type": "string" },
              {
                "name": "loadingTextPosition",
                "type": "'left' | 'right' | 'center' | string"
              },
              { "name": "loading", "type": "boolean" },
              { "name": "validity" },
              { "name": "validationMessage" },
              { "name": "handleClick" }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the button loses focus."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the button gains focus."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-button-group",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "direction",
              "value": {
                "type": "'horizontal' | 'vertical'",
                "default": "'horizontal'"
              }
            },
            {
              "name": "grow",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "wrap",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "start",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "gap",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [{ "name": "", "description": "The default slot." }],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "direction", "type": "'horizontal' | 'vertical'" },
              { "name": "grow", "type": "boolean" },
              { "name": "wrap", "type": "boolean" },
              { "name": "start", "type": "boolean" },
              { "name": "gap", "type": "boolean" },
              { "name": "defaultSlot", "type": "HTMLSlotElement" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-button-menu",
          "description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
          "doc-url": "",
          "attributes": [
            { "name": "max-width", "value": { "type": "number" } },
            { "name": "containerWidth", "value": { "type": "number" } },
            { "name": "limit", "value": { "type": "number", "default": "-1" } },
            {
              "name": "max-level",
              "value": { "type": "number", "default": "2" }
            },
            {
              "name": "size",
              "value": {
                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "icon-size",
              "value": { "type": "number", "default": "24" }
            },
            { "name": "no-gap", "value": { "type": "boolean" } },
            { "name": "no-padding", "value": { "type": "boolean" } }
          ],
          "slots": [{ "name": "", "description": "The default slot." }],
          "events": [],
          "js": {
            "properties": [
              { "name": "maxWidth", "type": "number" },
              { "name": "containerWidth", "type": "number" },
              { "name": "limit", "type": "number" },
              { "name": "maxLevel", "type": "number" },
              {
                "name": "size",
                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
              },
              { "name": "iconSize", "type": "number" },
              { "name": "noGap", "type": "boolean" },
              { "name": "noPadding", "type": "boolean" },
              { "name": "handleResize" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-chart",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "type",
              "value": { "type": "'area' | 'bar' | 'line'", "default": "'bar'" }
            },
            { "name": "data", "value": { "type": "any[]", "default": "[]" } },
            {
              "name": "categories",
              "value": { "type": "string | string[]", "default": "''" }
            },
            { "name": "xAxis", "value": { "type": "string" } },
            { "name": "d-size", "value": { "type": "number", "default": "1" } },
            {
              "name": "stacked",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "live",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "data-url",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "live-interval",
              "value": { "type": "number", "default": "1000" }
            },
            {
              "name": "height",
              "value": { "type": "number", "default": "300" }
            },
            {
              "name": "enable-animations",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "y-axis-append", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "type", "type": "'area' | 'bar' | 'line'" },
              { "name": "data", "type": "any[]" },
              { "name": "categories", "type": "string | string[]" },
              { "name": "xAxis", "type": "string" },
              { "name": "datapointSize", "type": "number" },
              { "name": "stacked", "type": "boolean" },
              { "name": "live", "type": "boolean" },
              { "name": "dataUrl", "type": "string" },
              { "name": "liveInterval", "type": "number" },
              { "name": "height", "type": "number" },
              { "name": "enableAnimations", "type": "boolean" },
              { "name": "yAxisAppend", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-checkbox",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
          "doc-url": "",
          "attributes": [
            { "name": "title", "value": { "type": "string", "default": "''" } },
            {
              "name": "name",
              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
              "value": { "type": "string" }
            },
            {
              "name": "unchecked-value",
              "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.",
              "value": { "type": "string" }
            },
            {
              "name": "size",
              "description": "The checkbox's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "disabled",
              "description": "Disables the checkbox.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "checked",
              "description": "Draws the checkbox in a checked state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "indeterminate",
              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "contained",
              "description": "Draws a container around the checkbox.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "borderless",
              "description": "Removes a container around the checkbox.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "horizontal",
              "description": "Applies styles relevant to checkboxes in a horizontal layout.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "Makes the checkbox a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "submit-on-click",
              "description": "Submits the form when checkbox is clicked.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "description",
              "description": "The checkbox's help text. If you need to display HTML, use the `description` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "label", "value": { "type": "string" } },
            { "name": "label-tooltip", "value": { "type": "string" } },
            {
              "name": "checked-icon",
              "description": "The icon to show when the checkbox is checked.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "unchecked-icon",
              "description": "The icon to show when the checkbox is unchecked.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "color",
              "description": "The color of the checkbox.",
              "value": { "type": "ColorOption", "default": "'default'" }
            },
            {
              "name": "checked-color",
              "description": "The color of the checkbox when checked. Overrides `color`.",
              "value": { "type": "ColorOption" }
            },
            {
              "name": "unchecked-color",
              "description": "The color of the checkbox when unchecked. Overrides `color`.",
              "value": { "type": "ColorOption" }
            }
          ],
          "slots": [
            { "name": "", "description": "The checkbox's label." },
            {
              "name": "description",
              "description": "A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute."
            },
            {
              "name": "selected-content",
              "description": "Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the checkbox loses focus."
            },
            {
              "name": "zn-change",
              "description": "Emitted when the checked state changes."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the checkbox gains focus."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the checkbox receives input."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "title", "type": "string" },
              {
                "name": "name",
                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "uncheckedValue",
                "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The checkbox's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "disabled",
                "description": "Disables the checkbox.",
                "type": "boolean"
              },
              {
                "name": "checked",
                "description": "Draws the checkbox in a checked state.",
                "type": "boolean"
              },
              {
                "name": "indeterminate",
                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
                "type": "boolean"
              },
              {
                "name": "contained",
                "description": "Draws a container around the checkbox.",
                "type": "boolean"
              },
              {
                "name": "borderless",
                "description": "Removes a container around the checkbox.",
                "type": "boolean"
              },
              {
                "name": "horizontal",
                "description": "Applies styles relevant to checkboxes in a horizontal layout.",
                "type": "boolean"
              },
              {
                "name": "defaultChecked",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Makes the checkbox a required field.",
                "type": "boolean"
              },
              {
                "name": "submitOnClick",
                "description": "Submits the form when checkbox is clicked.",
                "type": "boolean"
              },
              {
                "name": "description",
                "description": "The checkbox's help text. If you need to display HTML, use the `description` slot instead.",
                "type": "string"
              },
              { "name": "label", "type": "string" },
              { "name": "labelTooltip", "type": "string" },
              {
                "name": "checkedIcon",
                "description": "The icon to show when the checkbox is checked.",
                "type": "string"
              },
              {
                "name": "uncheckedIcon",
                "description": "The icon to show when the checkbox is unchecked.",
                "type": "string"
              },
              {
                "name": "color",
                "description": "The color of the checkbox.",
                "type": "ColorOption"
              },
              {
                "name": "checkedColor",
                "description": "The color of the checkbox when checked. Overrides `color`.",
                "type": "ColorOption"
              },
              {
                "name": "uncheckedColor",
                "description": "The color of the checkbox when unchecked. Overrides `color`.",
                "type": "ColorOption"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              { "name": "isChecked" },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the checkbox loses focus."
              },
              {
                "name": "zn-change",
                "description": "Emitted when the checked state changes."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the checkbox gains focus."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the checkbox receives input."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-checkbox-group",
          "description": "Shotrt summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the checkbox group's selected value changes.\n- **zn-input** - Emitted when the checkbox group receives user input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<zn-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **help-text** - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "name",
              "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current value of the checkbox group, submitted as a name/value pair with form data.",
              "value": { "type": "string[]", "default": "[]" }
            },
            {
              "name": "size",
              "description": "The checkbox group's size. This size will be applied to all child checkboxes.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "horizontal",
              "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "contained",
              "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "Ensures at least one child checkbox is checked before allowing the containing form to submit.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot where `<zn-checkbox>` elements are placed."
            },
            {
              "name": "label",
              "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-change",
              "description": "Emitted when the checkbox group's selected value changes."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the checkbox group receives user input."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "validationInput", "type": "HTMLInputElement" },
              {
                "name": "label",
                "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "name",
                "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the checkbox group, submitted as a name/value pair with form data.",
                "type": "string[]"
              },
              {
                "name": "size",
                "description": "The checkbox group's size. This size will be applied to all child checkboxes.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "horizontal",
                "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
                "type": "boolean"
              },
              {
                "name": "contained",
                "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Ensures at least one child checkbox is checked before allowing the containing form to submit.",
                "type": "boolean"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-change",
                "description": "Emitted when the checkbox group's selected value changes."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the checkbox group receives user input."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-chip",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "icon-size",
              "value": { "type": "number", "default": "18" }
            },
            {
              "name": "type",
              "value": {
                "type": "'info' | 'success' | 'warning' | 'error' | 'primary' |\n    'transparent' | 'custom' | 'neutral'",
                "default": "'neutral'"
              }
            },
            {
              "name": "size",
              "value": { "type": "'small' | 'medium' | 'large'" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-x",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-y",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "caption", "type": "string" },
              { "name": "iconSize", "type": "number" },
              {
                "name": "type",
                "type": "'info' | 'success' | 'warning' | 'error' | 'primary' |\n    'transparent' | 'custom' | 'neutral'"
              },
              { "name": "size", "type": "'small' | 'medium' | 'large'" },
              { "name": "flush", "type": "boolean" },
              { "name": "flushX", "type": "boolean" },
              { "name": "flushY", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-collapsible",
          "description": "Toggles between showing and hiding content when clicked\n---\n\n\n### **Slots:**\n - **header** - Clicking will toggle the show state of the data",
          "doc-url": "",
          "attributes": [
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "description", "value": { "type": "string" } },
            { "name": "label", "value": { "type": "string", "default": "''" } },
            {
              "name": "show-number",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "count-element",
              "value": { "type": "string", "default": "'*'" }
            },
            {
              "name": "expanded",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "default", "value": { "type": "'open' | 'closed'" } },
            { "name": "local-storage", "value": { "type": "boolean" } },
            {
              "name": "store-key",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "store-ttl",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "header",
              "description": "Clicking will toggle the show state of the data"
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "showNumber", "type": "boolean" },
              { "name": "countElement", "type": "string" },
              { "name": "expanded", "type": "boolean" },
              { "name": "defaultState", "type": "'open' | 'closed'" },
              { "name": "localStorage", "type": "boolean" },
              { "name": "storeKey", "type": "string" },
              { "name": "storeTtl", "type": "number" },
              { "name": "flush", "type": "boolean" },
              { "name": "numberOfItems", "type": "number" },
              { "name": "handleCaptionToggle" },
              { "name": "handleCollapse" },
              { "name": "recalculateNumberOfItems" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-cols",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "layout",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "mc", "value": { "type": "number", "default": "0" } },
            {
              "name": "no-gap",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "border",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "pad", "value": { "type": "boolean" } },
            {
              "name": "divide",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "pad-x", "value": { "type": "boolean" } },
            { "name": "pad-y", "value": { "type": "boolean" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "layout", "type": "string" },
              { "name": "maxColumns", "type": "number" },
              { "name": "noGap", "type": "boolean" },
              { "name": "border", "type": "boolean" },
              { "name": "pad", "type": "boolean" },
              { "name": "divide", "type": "boolean" },
              { "name": "padX", "type": "boolean" },
              { "name": "padY", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-confirm",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "variant",
              "description": "The dialog's theme variant.",
              "value": {
                "type": "'default' | 'warning' | 'announcement'",
                "default": "'default'"
              }
            },
            {
              "name": "size",
              "description": "The dialog's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "type",
              "description": "The dialogs type, which will determine the icon and color.",
              "value": {
                "type": "'warning' | 'error' | 'success' | 'info'",
                "default": "'warning'"
              }
            },
            {
              "name": "open",
              "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "action",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "content",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "confirmText",
              "value": { "type": "string", "default": "\"Confirm\"" }
            },
            {
              "name": "cancelText",
              "value": { "type": "string", "default": "\"Cancel\"" }
            },
            {
              "name": "hide-icon",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "show-loading",
              "description": "Show a loading state when the dialog is submitted.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "trigger",
              "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
              "value": { "type": "string" }
            },
            {
              "name": "announcement",
              "description": "The Dialogs announcement text.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "footer-text",
              "description": "The Dialogs footer text.",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              {
                "name": "variant",
                "description": "The dialog's theme variant.",
                "type": "'default' | 'warning' | 'announcement'"
              },
              {
                "name": "size",
                "description": "The dialog's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "type",
                "description": "The dialogs type, which will determine the icon and color.",
                "type": "'warning' | 'error' | 'success' | 'info'"
              },
              {
                "name": "open",
                "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
                "type": "boolean"
              },
              { "name": "caption", "type": "string" },
              { "name": "action", "type": "string" },
              { "name": "content", "type": "string" },
              { "name": "confirmText", "type": "string" },
              { "name": "cancelText", "type": "string" },
              { "name": "hideIcon", "type": "boolean" },
              {
                "name": "showLoading",
                "description": "Show a loading state when the dialog is submitted.",
                "type": "boolean"
              },
              {
                "name": "trigger",
                "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
                "type": "string"
              },
              {
                "name": "announcement",
                "description": "The Dialogs announcement text.",
                "type": "string"
              },
              {
                "name": "footerText",
                "description": "The Dialogs footer text.",
                "type": "string"
              },
              { "name": "dialog", "type": "ZnDialog" },
              { "name": "show" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-content-block",
          "description": "Short summary of the component's intended use.\n---\n",
          "doc-url": "",
          "attributes": [
            { "name": "time", "value": { "type": "string", "default": "''" } },
            {
              "name": "sender",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "avatar",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "outbound",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-collapse",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "short",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "default-display",
              "value": { "type": "'text' | 'html'", "default": "'text'" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "time", "type": "string" },
              { "name": "sender", "type": "string" },
              { "name": "avatar", "type": "string" },
              { "name": "outbound", "type": "boolean" },
              { "name": "noCollapse", "type": "boolean" },
              { "name": "short", "type": "boolean" },
              { "name": "defaultDisplay", "type": "'text' | 'html'" },
              { "name": "htmlNodes", "type": "Node[]" },
              { "name": "iframe", "type": "Promise<HTMLIFrameElement>" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-copy-button",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "value", "value": { "type": "string", "default": "''" } },
            {
              "name": "copy-label",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "src", "value": { "type": "string", "default": "''" } },
            { "name": "size", "value": { "type": "number", "default": "24" } },
            {
              "name": "from",
              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "copyIcon", "type": "HTMLSlotElement" },
              { "name": "successIcon", "type": "HTMLSlotElement" },
              { "name": "errorIcon", "type": "HTMLSlotElement" },
              { "name": "tooltip", "type": "ZnTooltip" },
              { "name": "isCopying", "type": "boolean" },
              { "name": "status", "type": "'rest' | 'success' | 'error'" },
              { "name": "value", "type": "string" },
              { "name": "copyLabel", "type": "string" },
              { "name": "src", "type": "string" },
              { "name": "size", "type": "number" },
              {
                "name": "from",
                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-data-select",
          "description": "A select component with built-in data providers for common options like colors, currencies, and countries.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the select's value changes.\n- **zn-clear** - Emitted when the clear button is activated.\n- **blur** - Emitted when the select loses focus.\n\n### **Slots:**\n - **label** - The select's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).\n- **expand-icon** - The container that wraps the expand icon (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).\n- **display-input** - The element that displays the selected option's label (forwarded from zn-select).",
          "doc-url": "",
          "attributes": [
            {
              "name": "name",
              "description": "The name of the select. Used for form submission.",
              "value": { "type": "string" }
            },
            {
              "name": "value",
              "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.",
              "value": { "type": "string | string[]", "default": "''" }
            },
            {
              "name": "provider",
              "description": "The provider of the select.",
              "value": {
                "type": "'color' | 'currency' | 'country' | 'phone' | 'us-state'"
              }
            },
            {
              "name": "icon-position",
              "description": "The position of the icon.",
              "value": {
                "type": "'start' | 'end' | 'none'",
                "default": "'none'"
              }
            },
            {
              "name": "filter",
              "description": "An array of keys to use for filtering the options in the selected provider.",
              "value": { "type": "string[]" }
            },
            {
              "name": "size",
              "description": "The selects size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "clearable",
              "description": "Should we show the clear button",
              "value": { "type": "boolean" }
            },
            {
              "name": "allow-all",
              "description": "Include an \"All\" option at the top.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "allow-common",
              "description": "Include a \"Common\" option that selects multiple common currencies.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "The selects label. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "context-note",
              "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "placement",
              "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.",
              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
            },
            {
              "name": "help-text",
              "description": "The selects help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "The selects required attribute.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disabled",
              "description": "Disables the select.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "icon-only",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "multiple",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "select-first",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "distinct",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "conditional",
              "value": { "type": "string", "default": "\"\"" }
            }
          ],
          "slots": [
            {
              "name": "label",
              "description": "The select's label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "context-note",
              "description": "Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the select. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-input",
              "description": "Emitted when the select's value changes."
            },
            {
              "name": "zn-clear",
              "description": "Emitted when the clear button is activated."
            },
            {
              "name": "blur",
              "description": "Emitted when the select loses focus."
            }
          ],
          "js": {
            "properties": [
              { "name": "select", "type": "ZnSelect" },
              {
                "name": "name",
                "description": "The name of the select. Used for form submission.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.",
                "type": "string | string[]"
              },
              {
                "name": "provider",
                "description": "The provider of the select.",
                "type": "'color' | 'currency' | 'country' | 'phone' | 'us-state'"
              },
              {
                "name": "iconPosition",
                "description": "The position of the icon.",
                "type": "'start' | 'end' | 'none'"
              },
              {
                "name": "filter",
                "description": "An array of keys to use for filtering the options in the selected provider.",
                "type": "string[]"
              },
              {
                "name": "size",
                "description": "The selects size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "clearable",
                "description": "Should we show the clear button",
                "type": "boolean"
              },
              {
                "name": "allowAll",
                "description": "Include an \"All\" option at the top.",
                "type": "boolean"
              },
              {
                "name": "allowCommon",
                "description": "Include a \"Common\" option that selects multiple common currencies.",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "The selects label. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "contextNote",
                "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
                "type": "string"
              },
              {
                "name": "placement",
                "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.",
                "type": "'top' | 'bottom'"
              },
              {
                "name": "helpText",
                "description": "The selects help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "The selects required attribute.",
                "type": "boolean"
              },
              {
                "name": "disabled",
                "description": "Disables the select.",
                "type": "boolean"
              },
              { "name": "iconOnly", "type": "boolean" },
              { "name": "multiple", "type": "boolean" },
              { "name": "selectFirst", "type": "boolean" },
              { "name": "distinct", "type": "string" },
              { "name": "conditional", "type": "string" },
              { "name": "validationMessage" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "closeOnTab" },
              { "name": "handleInput" },
              { "name": "handleClear" },
              { "name": "blur" }
            ],
            "events": [
              {
                "name": "zn-input",
                "description": "Emitted when the select's value changes."
              },
              {
                "name": "zn-clear",
                "description": "Emitted when the clear button is activated."
              },
              {
                "name": "blur",
                "description": "Emitted when the select loses focus."
              }
            ]
          }
        },
        {
          "name": "zn-data-table",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "data-uri", "value": { "type": "string" } },
            { "name": "data", "value": { "type": "any" } },
            { "name": "sort-column", "value": { "type": "string" } },
            {
              "name": "sort-direction",
              "value": { "type": "string", "default": "\"asc\"" }
            },
            {
              "name": "local-sort",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "filter",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "search",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "wide-column", "value": { "type": "string" } },
            { "name": "key", "value": { "type": "string", "default": "'id'" } },
            {
              "name": "headers",
              "value": {
                "type": "Record<string, HeaderConfig>",
                "default": "{}"
              }
            },
            {
              "name": "hide-headers",
              "value": { "type": "string", "default": "'{}'" }
            },
            {
              "name": "hide-columns",
              "value": { "type": "string", "default": "'{}'" }
            },
            {
              "name": "unsortable-headers",
              "value": { "type": "string", "default": "'{}'" }
            },
            {
              "name": "unsortable",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "hide-pagination", "value": { "type": "boolean" } },
            {
              "name": "standalone",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "empty-state-caption", "value": { "type": "string" } },
            {
              "name": "empty-state-icon",
              "value": { "type": "string", "default": "\"data_alert\"" }
            },
            { "name": "hide-checkboxes", "value": { "type": "boolean" } },
            { "name": "filters", "value": { "type": "[]", "default": "[]" } },
            {
              "name": "method",
              "value": { "type": "'GET' | 'POST'", "default": "'POST'" }
            },
            {
              "name": "no-initial-load",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "group-by",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "groups", "value": { "type": "string", "default": "''" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "search", "description": "Slot for search component." },
            { "name": "sort", "description": "Slot for sort component." },
            { "name": "filter", "description": "Slot for filter component." },
            {
              "name": "filter-top",
              "description": "Slot for top-level filter component."
            },
            {
              "name": "delete-action",
              "description": "Slot for delete action button."
            },
            {
              "name": "modify-action",
              "description": "Slot for modify action button."
            },
            {
              "name": "create-action",
              "description": "Slot for create action button."
            },
            {
              "name": "inputs",
              "description": "Slot for additional input controls."
            },
            {
              "name": "empty-state",
              "description": "Slot for custom empty state."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "dataUri", "type": "string" },
              { "name": "data", "type": "any" },
              { "name": "sortColumn", "type": "string" },
              { "name": "sortDirection", "type": "string" },
              { "name": "localSort", "type": "boolean" },
              { "name": "filter", "type": "string" },
              { "name": "search", "type": "string" },
              { "name": "wideColumn", "type": "string" },
              { "name": "key", "type": "string" },
              { "name": "headers", "type": "Record<string, HeaderConfig>" },
              { "name": "hiddenHeaders", "type": "string" },
              { "name": "hiddenColumns", "type": "string" },
              { "name": "unsortableHeaders", "type": "string" },
              { "name": "unsortable", "type": "boolean" },
              { "name": "hidePagination", "type": "boolean" },
              { "name": "standalone", "type": "boolean" },
              { "name": "caption", "type": "string" },
              { "name": "emptyStateCaption", "type": "string" },
              { "name": "emptyStateIcon", "type": "string" },
              { "name": "hideCheckboxes", "type": "boolean" },
              { "name": "filters", "type": "[]" },
              { "name": "method", "type": "'GET' | 'POST'" },
              { "name": "noInitialLoad", "type": "boolean" },
              { "name": "groupBy", "type": "string" },
              { "name": "groups", "type": "string" },
              { "name": "selectAllButton", "type": "ZnButton" },
              { "name": "requestParams", "type": "Record<string, any>" },
              { "name": "filterChangeListener" },
              { "name": "searchChangeListener" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-data-table-filter",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "filters",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "name",
              "value": { "type": "string", "default": "\"data-table-filter\"" }
            },
            { "name": "value", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "filters", "type": "string" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "validationMessage", "type": "string" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "handleQBClear" },
              { "name": "handleQBReset" },
              { "name": "handleQBUpdate" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-data-table-search",
          "description": "A search component for data tables.\n---\n\n\n### **Events:**\n - **zn-search-change** - Emitted when the search value changes (debounced).\n\n### **Methods:**\n - **getFormData(): _Record<string, any>_** - Collects form data from slotted input elements\n\n### **Slots:**\n - _default_ - The default slot for additional form inputs.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "name",
              "description": "The name of the search input field (default: \"search\").",
              "value": { "type": "string", "default": "\"search\"" }
            },
            {
              "name": "value",
              "description": "The current search value.",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "placeholder",
              "description": "The placeholder text for the search input (default: \"Search...\").",
              "value": { "type": "string", "default": "\"Search...\"" }
            },
            {
              "name": "help-text",
              "description": "Help text displayed below the search input.",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "search-uri",
              "description": "Optional URI to use for search operations.",
              "value": { "type": "string" }
            },
            {
              "name": "debounce-delay",
              "description": "The delay in milliseconds before triggering a search (default: 500).",
              "value": { "type": "number", "default": "350" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot for additional form inputs."
            }
          ],
          "events": [
            {
              "name": "zn-search-change",
              "description": "Emitted when the search value changes (debounced)."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "name",
                "description": "The name of the search input field (default: \"search\").",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current search value.",
                "type": "string"
              },
              {
                "name": "placeholder",
                "description": "The placeholder text for the search input (default: \"Search...\").",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "Help text displayed below the search input.",
                "type": "string"
              },
              {
                "name": "searchUri",
                "description": "Optional URI to use for search operations.",
                "type": "string"
              },
              {
                "name": "debounceDelay",
                "description": "The delay in milliseconds before triggering a search (default: 500).",
                "type": "number"
              },
              { "name": "validationMessage", "type": "string" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "handleInput" },
              { "name": "handleClear" }
            ],
            "events": [
              {
                "name": "zn-search-change",
                "description": "Emitted when the search value changes (debounced)."
              }
            ]
          }
        },
        {
          "name": "zn-data-table-sort",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-datepicker",
          "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
          "doc-url": "",
          "attributes": [
            {
              "name": "title",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "name",
              "description": "The name of the input, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "value",
              "description": "The current value of the input, submitted as a name/value pair with form data.",
              "value": { "type": "any", "default": "''" }
            },
            {
              "name": "size",
              "description": "The inputs size *",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "label",
              "description": "The inputs label. If you need to display HTML, use the `label` slot. *",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "context-note",
              "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "disabled",
              "description": "Disables the input *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "placeholder",
              "description": "Placeholder text to show as a hint when the input is empty.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "readonly",
              "description": "Makes the input read-only *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
              "value": { "type": "string" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "required",
              "description": "Makes the input a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "clearable",
              "description": "Adds a clear button to the calendar for removing a selected date. *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "range",
              "description": "Makes the input a range picker. *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disable-past-dates",
              "description": "Disallows selecting past dates. *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "min-date",
              "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *",
              "value": { "type": "string | Date | undefined" }
            },
            {
              "name": "max-date",
              "description": "Maximum date that can be selected. Accepts Date object or date string. *",
              "value": { "type": "string | Date | undefined" }
            },
            {
              "name": "format",
              "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)",
              "value": { "type": "string", "default": "'MM/dd/yyyy'" }
            }
          ],
          "slots": [
            {
              "name": "label",
              "description": "The datepicker's label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "context-note",
              "description": "Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute."
            },
            {
              "name": "help-text",
              "description": "Help text displayed below the input. Alternatively, you can use the `help-text` attribute."
            },
            {
              "name": "prefix",
              "description": "Content to display before the input (in addition to the default calendar icon)."
            },
            {
              "name": "suffix",
              "description": "Content to display after the input."
            }
          ],
          "events": [
            {
              "name": "zn-change",
              "description": "Emitted when the date value changes."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the input value changes."
            },
            {
              "name": "zn-blur",
              "description": "Emitted when the input loses focus."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the input gains focus."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "title", "type": "string" },
              {
                "name": "name",
                "description": "The name of the input, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the input, submitted as a name/value pair with form data.",
                "type": "any"
              },
              {
                "name": "defaultValue",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The inputs size *",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "label",
                "description": "The inputs label. If you need to display HTML, use the `label` slot. *",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*",
                "type": "string"
              },
              {
                "name": "contextNote",
                "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
                "type": "string"
              },
              {
                "name": "disabled",
                "description": "Disables the input *",
                "type": "boolean"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text to show as a hint when the input is empty.",
                "type": "string"
              },
              {
                "name": "readonly",
                "description": "Makes the input read-only *",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
                "type": "string"
              },
              { "name": "flush", "type": "boolean" },
              {
                "name": "required",
                "description": "Makes the input a required field.",
                "type": "boolean"
              },
              {
                "name": "clearable",
                "description": "Adds a clear button to the calendar for removing a selected date. *",
                "type": "boolean"
              },
              {
                "name": "range",
                "description": "Makes the input a range picker. *",
                "type": "boolean"
              },
              {
                "name": "disablePastDates",
                "description": "Disallows selecting past dates. *",
                "type": "boolean"
              },
              {
                "name": "minDate",
                "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *",
                "type": "string | Date | undefined"
              },
              {
                "name": "maxDate",
                "description": "Maximum date that can be selected. Accepts Date object or date string. *",
                "type": "string | Date | undefined"
              },
              {
                "name": "format",
                "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)",
                "type": "string"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-change",
                "description": "Emitted when the date value changes."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the input value changes."
              },
              {
                "name": "zn-blur",
                "description": "Emitted when the input loses focus."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the input gains focus."
              }
            ]
          }
        },
        {
          "name": "zn-defined-label",
          "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
          "doc-url": "",
          "attributes": [
            { "name": "value", "value": { "type": "string", "default": "''" } },
            {
              "name": "inputValue",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "input-size",
              "value": {
                "type": "'x-small' | 'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "name",
              "value": { "type": "string", "default": "'label'" }
            },
            { "name": "title", "value": { "type": "string" } },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "allow-custom",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "predefined-labels",
              "value": { "type": "array", "default": "[]" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "input", "type": "ZnInput" },
              { "name": "dropdown", "type": "ZnDropdown" },
              { "name": "value", "type": "string" },
              { "name": "inputValue", "type": "string" },
              {
                "name": "inputSize",
                "type": "'x-small' | 'small' | 'medium' | 'large'"
              },
              { "name": "name", "type": "string" },
              { "name": "title", "type": "string" },
              { "name": "disabled", "type": "boolean" },
              { "name": "allowCustom", "type": "boolean" },
              { "name": "predefinedLabels", "type": "array" },
              { "name": "validationMessage" },
              { "name": "validity" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-dialog",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the dialog is opens.\n- **zn-close** - Emitted when the dialog is closed.\n- **zn-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The dialog's label. Alternatively you can use the `label` attribute.\n- **header-icon** - Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.\n- **announcement-intro** - Optional Intro text to display below the icon, when using the variant `announcement`.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **footer** - The dialog's footer. This is typically used for buttons representing various options.\n- **footer-text** - Optional text to include below the footer buttons, when using the variant `announcement`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<zn-button>` elements.\n- **title** - The dialog's title.\n- **close-button** - The dialog's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
          "doc-url": "",
          "attributes": [
            {
              "name": "variant",
              "description": "The dialog's theme variant.",
              "value": {
                "type": "'default' | 'warning' | 'announcement'",
                "default": "'default'"
              }
            },
            {
              "name": "size",
              "description": "The dialog's size.",
              "value": {
                "type": "'small' | 'medium' | 'large' | 'custom'",
                "default": "'medium'"
              }
            },
            {
              "name": "open",
              "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string" }
            },
            {
              "name": "cosmic",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-header",
              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "trigger",
              "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            {
              "name": "label",
              "description": "The dialog's label. Alternatively you can use the `label` attribute."
            },
            {
              "name": "header-icon",
              "description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant."
            },
            {
              "name": "announcement-intro",
              "description": "Optional Intro text to display below the icon, when using the variant `announcement`."
            },
            {
              "name": "header-actions",
              "description": "Optional actions to add to the header. Works best with `<zn-button>` elements."
            },
            {
              "name": "footer",
              "description": "The dialog's footer. This is typically used for buttons representing various options."
            },
            {
              "name": "footer-text",
              "description": "Optional text to include below the footer buttons, when using the variant `announcement`."
            }
          ],
          "events": [
            {
              "name": "zn-show",
              "description": "Emitted when the dialog is opens."
            },
            {
              "name": "zn-close",
              "description": "Emitted when the dialog is closed."
            },
            {
              "name": "zn-request-close",
              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
            }
          ],
          "js": {
            "properties": [
              { "name": "dialog", "type": "HTMLDialogElement" },
              { "name": "closer", "type": "HTMLButtonElement" },
              {
                "name": "variant",
                "description": "The dialog's theme variant.",
                "type": "'default' | 'warning' | 'announcement'"
              },
              {
                "name": "size",
                "description": "The dialog's size.",
                "type": "'small' | 'medium' | 'large' | 'custom'"
              },
              {
                "name": "open",
                "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              { "name": "cosmic", "type": "boolean" },
              {
                "name": "noHeader",
                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
                "type": "boolean"
              },
              {
                "name": "trigger",
                "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "zn-show",
                "description": "Emitted when the dialog is opens."
              },
              {
                "name": "zn-close",
                "description": "Emitted when the dialog is closed."
              },
              {
                "name": "zn-request-close",
                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
              }
            ]
          }
        },
        {
          "name": "zn-dropdown",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **show()** - Opens the dropdown\n- **hide()** - Closes the dropdown\n- **reposition()** - Instructs the dropdown to reposition itself\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "open",
              "description": "Indicates whether the dropdown is open",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "placement",
              "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
              "value": {
                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
                "default": "'bottom-start'"
              }
            },
            {
              "name": "disabled",
              "description": "Disable the dropdown",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "stay-open-on-select",
              "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "distance",
              "description": "The distance in pixels from which to offset the panel away from the trigger",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "skidding",
              "description": "The distance in pixels from which to offset the panel away from the trigger",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "hoist",
              "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
              "value": { "type": "boolean", "default": "true" }
            },
            {
              "name": "sync",
              "description": "Syncs the popup width or height with the trigger element",
              "value": {
                "type": "'width' | 'height' | 'both' | undefined",
                "default": "undefined"
              }
            },
            { "name": "uri", "value": { "type": "string" } },
            {
              "name": "fetchedContent",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "popup", "type": "ZnPopup" },
              { "name": "trigger", "type": "HTMLSlotElement" },
              { "name": "panel", "type": "HTMLSlotElement" },
              {
                "name": "open",
                "description": "Indicates whether the dropdown is open",
                "type": "boolean"
              },
              {
                "name": "placement",
                "description": "The placement of the dropdown. Note the actual placement may vary based on the available space",
                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n    'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
              },
              {
                "name": "disabled",
                "description": "Disable the dropdown",
                "type": "boolean"
              },
              {
                "name": "stayOpenOnSelect",
                "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open",
                "type": "boolean"
              },
              {
                "name": "containingElement",
                "description": "The dropdown will close when the user interacts outside the element*",
                "type": "HTMLElement | undefined"
              },
              {
                "name": "distance",
                "description": "The distance in pixels from which to offset the panel away from the trigger",
                "type": "number"
              },
              {
                "name": "skidding",
                "description": "The distance in pixels from which to offset the panel away from the trigger",
                "type": "number"
              },
              {
                "name": "hoist",
                "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible",
                "type": "boolean"
              },
              {
                "name": "sync",
                "description": "Syncs the popup width or height with the trigger element",
                "type": "'width' | 'height' | 'both' | undefined"
              },
              { "name": "uri", "type": "string" },
              { "name": "fetchedContent", "type": "string" },
              { "name": "handlePanelSelect", "description": "Events" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-editor",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "id", "value": { "type": "string" } },
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "string" } },
            {
              "name": "interaction-type",
              "value": { "type": "'ticket' | 'chat'", "default": "'chat'" }
            },
            { "name": "attachment-url", "value": { "type": "string" } },
            {
              "name": "code-blocks",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "dividers",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "links",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "attachments",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "images",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "videos",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "dates",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "emojis",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "code",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "ai",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "ai-path",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "id", "type": "string" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "interactionType", "type": "'ticket' | 'chat'" },
              { "name": "uploadAttachmentUrl", "type": "string" },
              { "name": "codeBlocksEnabled", "type": "boolean" },
              { "name": "dividersEnabled", "type": "boolean" },
              { "name": "linksEnabled", "type": "boolean" },
              { "name": "attachmentsEnabled", "type": "boolean" },
              { "name": "imagesEnabled", "type": "boolean" },
              { "name": "videosEnabled", "type": "boolean" },
              { "name": "datesEnabled", "type": "boolean" },
              { "name": "emojisEnabled", "type": "boolean" },
              { "name": "codeEnabled", "type": "boolean" },
              { "name": "aiEnabled", "type": "boolean" },
              { "name": "aiPath", "type": "string" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "validationMessage", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-empty-state",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "description",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "type",
              "value": {
                "type": "'error' | 'info' | 'primary' | ''",
                "default": "''"
              }
            },
            {
              "name": "padded",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "type", "type": "'error' | 'info' | 'primary' | ''" },
              { "name": "padded", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-expanding-action",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string" } },
            {
              "name": "method",
              "value": { "type": "'drop' | 'fill'", "default": "'drop'" }
            },
            { "name": "context-uri", "value": { "type": "string" } },
            { "name": "count", "value": { "type": "string" } },
            { "name": "color", "value": { "type": "string" } },
            {
              "name": "prefetch",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "basis",
              "value": { "type": "string", "default": "'300'" }
            },
            { "name": "max-height", "value": { "type": "string" } },
            {
              "name": "open",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "master-id", "value": { "type": "string" } },
            {
              "name": "fetch-style",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "no-prefetch",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "method", "type": "'drop' | 'fill'" },
              { "name": "contextUri", "type": "string" },
              { "name": "count", "type": "string" },
              { "name": "color", "type": "string" },
              { "name": "prefetch", "type": "boolean" },
              { "name": "basis", "type": "string" },
              { "name": "maxHeight", "type": "string" },
              { "name": "open", "type": "boolean" },
              { "name": "masterId", "type": "string" },
              { "name": "fetchStyle", "type": "string" },
              { "name": "noPrefetch", "type": "boolean" },
              { "name": "handleIconClicked" },
              { "name": "handleIconCloseClicked" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-file",
          "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **droparea-icon** - Optional droparea icon to use instead of the default. Works best with `<zn-icon>`.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **trigger** - The container that wraps the trigger.",
          "doc-url": "",
          "attributes": [
            {
              "name": "files",
              "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
              "value": { "type": "string" }
            },
            {
              "name": "name",
              "description": "The name of the file control, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
              "value": { "type": "string" }
            },
            {
              "name": "size",
              "description": "The file control's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "label",
              "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "clearable",
              "description": "If this is set, then the only way to remove files is to click the cross next to them.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "help-text",
              "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "disabled",
              "description": "Disables the file control.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "droparea",
              "description": "Draw the file control as a drop area",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "accept",
              "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "capture",
              "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
              "value": { "type": "'user' | 'environment'" }
            },
            {
              "name": "multiple",
              "description": "Indicates whether the user can select more than one file.\nHas no effect if webkitdirectory is set.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "webkitdirectory",
              "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "Makes the input a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "hide-value",
              "description": "Suppress the value from being displayed in the file control",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "label",
              "description": "The file control's label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute."
            },
            {
              "name": "droparea-icon",
              "description": "Optional droparea icon to use instead of the default. Works best with `<zn-icon>`."
            },
            {
              "name": "trigger",
              "description": "Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the control loses focus."
            },
            {
              "name": "zn-change",
              "description": "Emitted when an alteration to the control's value is committed by the user."
            },
            {
              "name": "zn-error",
              "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the control gains focus."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the control receives input."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "button", "type": "ZnButton" },
              { "name": "dropareaWrapper", "type": "HTMLDivElement" },
              { "name": "dropareaIcon", "type": "HTMLSpanElement" },
              { "name": "inputChosen", "type": "HTMLSpanElement" },
              {
                "name": "files",
                "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)"
              },
              {
                "name": "name",
                "description": "The name of the file control, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)"
              },
              {
                "name": "defaultValue",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The file control's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "label",
                "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "clearable",
                "description": "If this is set, then the only way to remove files is to click the cross next to them.",
                "type": "boolean"
              },
              {
                "name": "helpText",
                "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "disabled",
                "description": "Disables the file control.",
                "type": "boolean"
              },
              {
                "name": "droparea",
                "description": "Draw the file control as a drop area",
                "type": "boolean"
              },
              {
                "name": "accept",
                "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
                "type": "string"
              },
              {
                "name": "capture",
                "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
                "type": "'user' | 'environment'"
              },
              {
                "name": "multiple",
                "description": "Indicates whether the user can select more than one file.\nHas no effect if webkitdirectory is set.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
                "type": "boolean"
              },
              {
                "name": "webkitdirectory",
                "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Makes the input a required field.",
                "type": "boolean"
              },
              {
                "name": "hideValue",
                "description": "Suppress the value from being displayed in the file control",
                "type": "boolean"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the control loses focus."
              },
              {
                "name": "zn-change",
                "description": "Emitted when an alteration to the control's value is committed by the user."
              },
              {
                "name": "zn-error",
                "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the control gains focus."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the control receives input."
              }
            ]
          }
        },
        {
          "name": "zn-filter-container",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "attr",
              "value": { "type": "string", "default": "'filter'" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [{ "name": "attr", "type": "string" }],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-filter-wrapper",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "button",
              "value": { "type": "string", "default": "'Filter'" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "button", "type": "string" },
              { "name": "handleSubmit" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-form-group",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The form group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The form groups help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [{ "name": "", "description": "The default slot." }],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "label",
                "description": "The form group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The form groups help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-header",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "full-location", "value": { "type": "string" } },
            { "name": "entity-id", "value": { "type": "string" } },
            { "name": "entity-id-show", "value": { "type": "boolean" } },
            {
              "name": "transparent",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "icon", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            {
              "name": "navigation",
              "value": { "type": "array", "default": "[]" }
            },
            { "name": "full-width", "value": { "type": "boolean" } },
            { "name": "previous-path", "value": { "type": "string" } },
            { "name": "previous-target", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "fullLocation", "type": "string" },
              { "name": "entityId", "type": "string" },
              { "name": "entityIdShow", "type": "boolean" },
              { "name": "transparent", "type": "boolean" },
              { "name": "caption", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "navigation", "type": "array" },
              { "name": "fullWidth", "type": "boolean" },
              { "name": "previousPath", "type": "string" },
              { "name": "previousTarget", "type": "string" },
              { "name": "handleAltPress" },
              { "name": "handleAltUp" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-hover-container",
          "description": "The HoverContainer component is used to display additional information when a user hovers over or clicks\non an element.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the hover-container is shown.\n- **zn-after-show** - Emitted after the hover-container is shown.\n- **zn-hide** - Emitted when the hover-container is hidden.\n- **zn-after-hide** - Emitted after the hover-container is hidden.\n\n### **Slots:**\n - _default_ - The content of the hover-container\n- **anchor** - The anchor the hover-container is attached to.",
          "doc-url": "",
          "attributes": [
            {
              "name": "content",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "placement",
              "value": {
                "type": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
                "default": "'top'"
              }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "distance",
              "value": { "type": "number", "default": "4" }
            },
            {
              "name": "open",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "skidding",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "trigger",
              "value": { "type": "string", "default": "'hover focus'" }
            },
            {
              "name": "hoist",
              "value": { "type": "boolean", "default": "true" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the hover-container" },
            {
              "name": "anchor",
              "description": "The anchor the hover-container is attached to."
            }
          ],
          "events": [
            {
              "name": "zn-show",
              "description": "Emitted when the hover-container is shown."
            },
            {
              "name": "zn-after-show",
              "description": "Emitted after the hover-container is shown."
            },
            {
              "name": "zn-hide",
              "description": "Emitted when the hover-container is hidden."
            },
            {
              "name": "zn-after-hide",
              "description": "Emitted after the hover-container is hidden."
            }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "body", "type": "HTMLElement" },
              { "name": "popup", "type": "Popup" },
              { "name": "content", "type": "string" },
              {
                "name": "placement",
                "type": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
              },
              { "name": "disabled", "type": "boolean" },
              { "name": "distance", "type": "number" },
              { "name": "open", "type": "boolean" },
              { "name": "skidding", "type": "number" },
              { "name": "trigger", "type": "string" },
              { "name": "hoist", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-show",
                "description": "Emitted when the hover-container is shown."
              },
              {
                "name": "zn-after-show",
                "description": "Emitted after the hover-container is shown."
              },
              {
                "name": "zn-hide",
                "description": "Emitted when the hover-container is hidden."
              },
              {
                "name": "zn-after-hide",
                "description": "Emitted after the hover-container is hidden."
              }
            ]
          }
        },
        {
          "name": "zn-icon",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "src", "value": { "type": "string" } },
            { "name": "alt", "value": { "type": "string" } },
            { "name": "size", "value": { "type": "number", "default": "24" } },
            {
              "name": "round",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "tile",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "depth",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "library", "value": { "type": "IconLibrary" } },
            { "name": "color", "value": { "type": "IconColor" } },
            {
              "name": "padded",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "blink",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "squared",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "src", "type": "string" },
              { "name": "alt", "type": "string" },
              { "name": "size", "type": "number" },
              { "name": "round", "type": "boolean" },
              { "name": "tile", "type": "boolean" },
              { "name": "depth", "type": "boolean" },
              { "name": "library", "type": "IconLibrary" },
              { "name": "color", "type": "IconColor" },
              { "name": "padded", "type": "boolean" },
              { "name": "blink", "type": "boolean" },
              { "name": "squared", "type": "boolean" },
              { "name": "gravatarOptions", "type": "string" },
              { "name": "defaultLibrary", "type": "IconLibrary" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-icon-picker",
          "description": "\n---\n",
          "doc-url": "",
          "attributes": [
            { "name": "name", "value": { "type": "string", "default": "''" } },
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            { "name": "label", "value": { "type": "string", "default": "''" } },
            {
              "name": "library",
              "value": { "type": "string", "default": "'material'" }
            },
            { "name": "color", "value": { "type": "string", "default": "''" } },
            {
              "name": "no-color",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-library",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "help-text",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "required",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "form", "value": { "type": "string" } }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "name", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "library", "type": "string" },
              { "name": "color", "type": "string" },
              { "name": "noColor", "type": "boolean" },
              { "name": "noLibrary", "type": "boolean" },
              { "name": "helpText", "type": "string" },
              { "name": "disabled", "type": "boolean" },
              { "name": "required", "type": "boolean" },
              { "name": "form", "type": "string" },
              { "name": "defaultValue", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "validationMessage", "type": "string" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-inline-edit",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "value",
              "value": { "type": "string | string[]", "default": "''" }
            },
            { "name": "name", "value": { "type": "string" } },
            { "name": "placeholder", "value": { "type": "string" } },
            { "name": "edit-text", "value": { "type": "string" } },
            { "name": "disabled", "value": { "type": "boolean" } },
            { "name": "inline", "value": { "type": "boolean" } },
            { "name": "padded", "value": { "type": "boolean" } },
            {
              "name": "size",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            { "name": "required", "value": { "type": "boolean" } },
            { "name": "pattern", "value": { "type": "string" } },
            { "name": "multiple", "value": { "type": "boolean" } },
            { "name": "clearable", "value": { "type": "boolean" } },
            { "name": "min", "value": { "type": "string | number" } },
            { "name": "max", "value": { "type": "string | number" } },
            { "name": "step", "value": { "type": "number | 'any'" } },
            {
              "name": "input-type",
              "value": {
                "type": "'select' | 'text' | 'data-select' | 'number' | 'textarea'",
                "default": "'text'"
              }
            },
            {
              "name": "options",
              "value": { "type": "{ [key: string]: string }", "default": "{}" }
            },
            { "name": "provider", "value": { "type": "string" } },
            {
              "name": "icon-position",
              "value": {
                "type": "'start' | 'end' | 'none'",
                "default": "'none'"
              }
            },
            {
              "name": "data-uri",
              "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.\nOnly works with type select.",
              "value": { "type": "string" }
            },
            {
              "name": "context-data",
              "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
              "value": { "type": "string" }
            },
            {
              "name": "search",
              "description": "Enables search/filtering on select inputs.",
              "value": { "type": "boolean" }
            },
            {
              "name": "help-text",
              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "dir",
              "description": "The text direction for the input (ltr or rtl) *",
              "value": { "type": "'ltr' | 'rtl' | 'auto'", "default": "'auto'" }
            },
            {
              "name": "autocomplete",
              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property."
            },
            { "name": "example", "description": "An example slot." },
            {
              "name": "help-text",
              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "value", "type": "string | string[]" },
              { "name": "name", "type": "string" },
              { "name": "placeholder", "type": "string" },
              { "name": "editText", "type": "string" },
              { "name": "disabled", "type": "boolean" },
              { "name": "inline", "type": "boolean" },
              { "name": "padded", "type": "boolean" },
              { "name": "size", "type": "'small' | 'medium' | 'large'" },
              { "name": "required", "type": "boolean" },
              { "name": "pattern", "type": "string" },
              { "name": "multiple", "type": "boolean" },
              { "name": "clearable", "type": "boolean" },
              { "name": "min", "type": "string | number" },
              { "name": "max", "type": "string | number" },
              { "name": "step", "type": "number | 'any'" },
              {
                "name": "inputType",
                "type": "'select' | 'text' | 'data-select' | 'number' | 'textarea'"
              },
              { "name": "options", "type": "{ [key: string]: string }" },
              { "name": "selectProvider", "type": "string" },
              { "name": "iconPosition", "type": "'start' | 'end' | 'none'" },
              {
                "name": "dataUri",
                "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.\nOnly works with type select.",
                "type": "string"
              },
              {
                "name": "contextData",
                "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
                "type": "string"
              },
              {
                "name": "search",
                "description": "Enables search/filtering on select inputs.",
                "type": "boolean"
              },
              {
                "name": "helpText",
                "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
                "type": "string"
              },
              {
                "name": "dir",
                "description": "The text direction for the input (ltr or rtl) *",
                "type": "'ltr' | 'rtl' | 'auto'"
              },
              {
                "name": "autocomplete",
                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
                "type": "string"
              },
              { "name": "input", "type": "ZnInput | ZnSelect" },
              { "name": "defaultValue", "type": "string | string[]" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "validationMessage", "type": "string" },
              { "name": "mouseEventHandler" },
              { "name": "escKeyHandler" },
              { "name": "submitKeyHandler" },
              { "name": "captureMouseDown" },
              { "name": "captureKeyDown" },
              { "name": "handleEditClick" },
              { "name": "handleSubmitClick" },
              { "name": "handleCancelClick" },
              { "name": "handleBlur" },
              { "name": "handleInput" },
              { "name": "handleSlotChange" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-input",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
          "doc-url": "",
          "attributes": [
            {
              "name": "title",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "type",
              "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
              "value": {
                "type": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'",
                "default": "'text'"
              }
            },
            {
              "name": "name",
              "description": "The name of the input, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "value",
              "description": "The current value of the input, submitted as a name/value pair with form data.",
              "value": { "type": "any", "default": "''" }
            },
            {
              "name": "size",
              "description": "The inputs size *",
              "value": {
                "type": "'x-small' | 'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "pill",
              "description": "Draws a pill-styled input *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "The inputs label. If you need to display HTML, use the `label` slot. *",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "context-note",
              "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "clearable",
              "description": "Adds a clear button when the input is not empty *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "optional-icon",
              "description": "Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default\noptional icon.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disabled",
              "description": "Disables the input *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "filled",
              "description": "Fills the input background white *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "placeholder",
              "description": "Placeholder text to show as a hint when the input is empty.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "readonly",
              "description": "Makes the input read-only *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "password-toggle",
              "description": "Adds a button to toggle the passwords visibility, only applies to password types *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "password-visible",
              "description": "Determines whether or no the password is currently visible. Only applies to password types *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-spin-buttons",
              "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "color-format",
              "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
              "value": {
                "type": "'hex' | 'rgb' | 'hsl' | 'oklch'",
                "default": "'hex'"
              }
            },
            {
              "name": "form",
              "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
              "value": { "type": "string" }
            },
            {
              "name": "required",
              "description": "Makes the input a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "pattern",
              "description": "A regular expression pattern to validate input against.",
              "value": { "type": "string" }
            },
            {
              "name": "minlength",
              "description": "The minimum length of input that will be considered valid.",
              "value": { "type": "number" }
            },
            {
              "name": "maxlength",
              "description": "The maximum length of input that will be considered valid.",
              "value": { "type": "number" }
            },
            {
              "name": "min",
              "description": "The input's minimum value. Only applies to date and number input types.",
              "value": { "type": "number | string" }
            },
            {
              "name": "max",
              "description": "The input's maximum value. Only applies to date and number input types.",
              "value": { "type": "number | string" }
            },
            {
              "name": "step",
              "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
              "value": { "type": "number | 'any'" }
            },
            {
              "name": "autocapitalize",
              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
              "value": {
                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
              }
            },
            {
              "name": "autocorrect",
              "description": "Indicates whether the browser's autocorrect feature is on or off.",
              "value": { "type": "'off' | 'on'" }
            },
            {
              "name": "autocomplete",
              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
              "value": { "type": "string" }
            },
            {
              "name": "autofocus",
              "description": "Indicates that the input should receive focus on page load.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enterkeyhint",
              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
              "value": {
                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
              }
            },
            {
              "name": "spellcheck",
              "description": "Enables spell checking on the input.",
              "value": { "type": "boolean", "default": "true" }
            },
            {
              "name": "inputmode",
              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
              "value": {
                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
              }
            }
          ],
          "slots": [
            {
              "name": "label",
              "description": "The input's label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "context-note",
              "description": "Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute."
            },
            {
              "name": "prefix",
              "description": "Used to prepend a presentational icon or similar element to the input."
            },
            {
              "name": "suffix",
              "description": "Used to append a presentational icon or similar element to the input."
            },
            {
              "name": "clear-icon",
              "description": "An icon to use in lieu of the default clear icon."
            },
            {
              "name": "show-password-icon",
              "description": "An icon to use in lieu of the default show password icon."
            },
            {
              "name": "hide-password-icon",
              "description": "An icon to use in lieu of the default hide password icon."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the control loses focus."
            },
            {
              "name": "zn-change",
              "description": "Emitted when an alteration to the control's value is committed by the user."
            },
            {
              "name": "zn-clear",
              "description": "Emitted when the clear button is activated."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the control gains focus."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the control receives input."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "colorPicker", "type": "HTMLInputElement" },
              { "name": "title", "type": "string" },
              {
                "name": "type",
                "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
                "type": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'"
              },
              {
                "name": "name",
                "description": "The name of the input, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the input, submitted as a name/value pair with form data.",
                "type": "any"
              },
              {
                "name": "defaultValue",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The inputs size *",
                "type": "'x-small' | 'small' | 'medium' | 'large'"
              },
              {
                "name": "pill",
                "description": "Draws a pill-styled input *",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "The inputs label. If you need to display HTML, use the `label` slot. *",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*",
                "type": "string"
              },
              {
                "name": "contextNote",
                "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
                "type": "string"
              },
              {
                "name": "clearable",
                "description": "Adds a clear button when the input is not empty *",
                "type": "boolean"
              },
              {
                "name": "optionalIcon",
                "description": "Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default\noptional icon.",
                "type": "boolean"
              },
              {
                "name": "disabled",
                "description": "Disables the input *",
                "type": "boolean"
              },
              {
                "name": "filled",
                "description": "Fills the input background white *",
                "type": "boolean"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text to show as a hint when the input is empty.",
                "type": "string"
              },
              {
                "name": "readonly",
                "description": "Makes the input read-only *",
                "type": "boolean"
              },
              {
                "name": "passwordToggle",
                "description": "Adds a button to toggle the passwords visibility, only applies to password types *",
                "type": "boolean"
              },
              {
                "name": "passwordVisible",
                "description": "Determines whether or no the password is currently visible. Only applies to password types *",
                "type": "boolean"
              },
              {
                "name": "noSpinButtons",
                "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
                "type": "boolean"
              },
              {
                "name": "colorFormat",
                "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
                "type": "'hex' | 'rgb' | 'hsl' | 'oklch'"
              },
              {
                "name": "form",
                "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Makes the input a required field.",
                "type": "boolean"
              },
              {
                "name": "pattern",
                "description": "A regular expression pattern to validate input against.",
                "type": "string"
              },
              {
                "name": "minlength",
                "description": "The minimum length of input that will be considered valid.",
                "type": "number"
              },
              {
                "name": "maxlength",
                "description": "The maximum length of input that will be considered valid.",
                "type": "number"
              },
              {
                "name": "min",
                "description": "The input's minimum value. Only applies to date and number input types.",
                "type": "number | string"
              },
              {
                "name": "max",
                "description": "The input's maximum value. Only applies to date and number input types.",
                "type": "number | string"
              },
              {
                "name": "step",
                "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
                "type": "number | 'any'"
              },
              {
                "name": "autocapitalize",
                "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
              },
              {
                "name": "autocorrect",
                "description": "Indicates whether the browser's autocorrect feature is on or off.",
                "type": "'off' | 'on'"
              },
              {
                "name": "autocomplete",
                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
                "type": "string"
              },
              {
                "name": "autofocus",
                "description": "Indicates that the input should receive focus on page load.",
                "type": "boolean"
              },
              {
                "name": "enterkeyhint",
                "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
              },
              {
                "name": "spellcheck",
                "description": "Enables spell checking on the input.",
                "type": "boolean"
              },
              {
                "name": "inputmode",
                "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
              },
              {
                "name": "valueAsDate",
                "description": "Gets or sets the current value as `date` object. Returns `null` if the value can't be converted. This will use\nthe native `<input type=\"{{type}}\">` implementation and may result in an error."
              },
              {
                "name": "valueAsNumber",
                "description": "Gets or sets the current value as a number. Return `null` if the value can't be converted."
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the control loses focus."
              },
              {
                "name": "zn-change",
                "description": "Emitted when an alteration to the control's value is committed by the user."
              },
              {
                "name": "zn-clear",
                "description": "Emitted when the clear button is activated."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the control gains focus."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the control receives input."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-input-group",
          "description": "A wrapper component that groups inputs and selects visually.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for inputs and selects.\n- **label** - The input group's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input group container.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The input group's label. If you need to display HTML, use the `label` slot.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "gap",
              "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.",
              "value": { "type": "'sm' | 'md' | 'lg'" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot for inputs and selects."
            },
            {
              "name": "label",
              "description": "The input group's label. Alternatively, you can use the `label` attribute."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              {
                "name": "label",
                "description": "The input group's label. If you need to display HTML, use the `label` slot.",
                "type": "string"
              },
              {
                "name": "gap",
                "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.",
                "type": "'sm' | 'md' | 'lg'"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-item",
          "description": "Used for listing items in a description list. Caption on the right, content on the left.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Can either be slotted or use the value attribute\n- **actions** - Used for adding actions to a zn-item.\n\n### **CSS Parts:**\n - **base** - The items base wrapper\n- **caption** - The items caption\n- **icon** - The items icon",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            { "name": "stacked", "value": { "type": "boolean" } },
            {
              "name": "size",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            { "name": "edit-on-hover", "value": { "type": "boolean" } },
            { "name": "help-tooltip", "value": { "type": "string" } },
            { "name": "icon", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "string" } },
            { "name": "inline", "value": { "type": "boolean" } },
            { "name": "grid", "value": { "type": "boolean" } },
            { "name": "no-padding", "value": { "type": "boolean" } },
            { "name": "align-end", "value": { "type": "boolean" } },
            { "name": "align-center", "value": { "type": "boolean" } }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot. Can either be slotted or use the value attribute"
            },
            {
              "name": "actions",
              "description": "Used for adding actions to a zn-item."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "stacked", "type": "boolean" },
              { "name": "size", "type": "'small' | 'medium' | 'large'" },
              { "name": "editOnHover", "type": "boolean" },
              { "name": "helpTooltip", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "inline", "type": "boolean" },
              { "name": "grid", "type": "boolean" },
              { "name": "noPadding", "type": "boolean" },
              { "name": "alignEnd", "type": "boolean" },
              { "name": "alignCenter", "type": "boolean" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-key",
          "description": "A legend key item, typically used alongside charts to label and toggle visibility of data series by category.\n---\n\n\n### **Slots:**\n - _default_ - The description of the key.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            {
              "name": "attribute",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "value", "value": { "type": "string", "default": "''" } },
            {
              "name": "color",
              "value": {
                "type": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'",
                "default": "'primary'"
              }
            },
            {
              "name": "active",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "icon-size",
              "value": { "type": "number", "default": "24" }
            }
          ],
          "slots": [
            { "name": "", "description": "The description of the key." }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "attribute", "type": "string" },
              { "name": "value", "type": "string" },
              {
                "name": "color",
                "type": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'"
              },
              { "name": "active", "type": "boolean" },
              { "name": "iconSize", "type": "number" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-key-container",
          "description": "A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the set of active keys changes.\n\n### **Slots:**\n - _default_ - The content to be filtered.\n- **keys** - The key items (zn-key) that define the filters.",
          "doc-url": "",
          "attributes": [
            {
              "name": "position",
              "value": {
                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'",
                "default": "'bottom-start'"
              }
            },
            {
              "name": "target",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "item-selector",
              "value": { "type": "string", "default": "'[data-type]'" }
            },
            {
              "name": "filter-attribute",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "no-scroll",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content to be filtered." },
            {
              "name": "keys",
              "description": "The key items (zn-key) that define the filters."
            }
          ],
          "events": [
            {
              "name": "zn-change",
              "description": "Emitted when the set of active keys changes."
            }
          ],
          "js": {
            "properties": [
              { "name": "keysSlot", "type": "HTMLSlotElement" },
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              {
                "name": "position",
                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'"
              },
              { "name": "target", "type": "string" },
              { "name": "itemSelector", "type": "string" },
              { "name": "filterAttribute", "type": "string" },
              { "name": "noScroll", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-change",
                "description": "Emitted when the set of active keys changes."
              }
            ]
          }
        },
        {
          "name": "zn-linked-select",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "name",
              "value": { "type": "string", "default": "\"\"" }
            },
            { "name": "value", "value": { "type": "string" } },
            {
              "name": "checked",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "options", "value": { "type": "linkedSelectOptions" } },
            {
              "name": "linked-select",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "cache-key",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "label",
              "value": { "type": "string", "default": "\"\"" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "checked", "type": "boolean" },
              { "name": "options", "type": "linkedSelectOptions" },
              { "name": "linkedSelect", "type": "string" },
              { "name": "cacheKey", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "input", "type": "ZnSelect" },
              { "name": "displayLabel" },
              { "name": "validity" },
              { "name": "validationMessage" },
              { "name": "handleLinkedSelectChange" },
              { "name": "handleSelectChange" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-menu",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "actions", "value": { "type": "array", "default": "[]" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "actions", "type": "array" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-menu-item",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "type",
              "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
              "value": {
                "type": "'normal' | 'checkbox'",
                "default": "'normal'"
              }
            },
            {
              "name": "checked",
              "description": "Draws the item in a checked state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "checked-position",
              "value": { "type": "'left' | 'right'", "default": "'left'" }
            },
            {
              "name": "value",
              "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "loading",
              "description": "Draws the menu item in a loading state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disabled",
              "description": "Draws the menu item in a disabled state, preventing selection.",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "color", "value": { "type": "string" } },
            { "name": "href", "value": { "type": "string" } },
            { "name": "data-path", "value": { "type": "string" } },
            {
              "name": "target",
              "value": {
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              }
            },
            {
              "name": "data-target",
              "value": { "type": "'modal' | 'slide' | string" }
            },
            {
              "name": "rel",
              "value": { "type": "string", "default": "'noreferrer noopener'" }
            },
            { "name": "gaid", "value": { "type": "string" } },
            {
              "name": "confirm",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush",
              "description": "Removes all padding from the menu item.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-x",
              "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-y",
              "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-border",
              "description": "Removes the border from the menu item.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "active",
              "description": "Marks the menu item as currently active/selected.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "menuItem", "type": "HTMLElement" },
              {
                "name": "type",
                "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
                "type": "'normal' | 'checkbox'"
              },
              {
                "name": "checked",
                "description": "Draws the item in a checked state.",
                "type": "boolean"
              },
              { "name": "checkedPosition", "type": "'left' | 'right'" },
              {
                "name": "value",
                "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
                "type": "string"
              },
              {
                "name": "loading",
                "description": "Draws the menu item in a loading state.",
                "type": "boolean"
              },
              {
                "name": "disabled",
                "description": "Draws the menu item in a disabled state, preventing selection.",
                "type": "boolean"
              },
              { "name": "color", "type": "string" },
              { "name": "href", "type": "string" },
              { "name": "dataPath", "type": "string" },
              {
                "name": "target",
                "type": "'_self' | '_blank' | '_parent' | '_top' | string"
              },
              { "name": "dataTarget", "type": "'modal' | 'slide' | string" },
              { "name": "rel", "type": "string" },
              { "name": "gaid", "type": "string" },
              { "name": "confirm", "type": "boolean" },
              {
                "name": "flush",
                "description": "Removes all padding from the menu item.",
                "type": "boolean"
              },
              {
                "name": "flushX",
                "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.",
                "type": "boolean"
              },
              {
                "name": "flushY",
                "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.",
                "type": "boolean"
              },
              {
                "name": "noBorder",
                "description": "Removes the border from the menu item.",
                "type": "boolean"
              },
              {
                "name": "active",
                "description": "Marks the menu item as currently active/selected.",
                "type": "boolean"
              }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-navbar",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "navigation",
              "value": { "type": "array", "default": "[]" }
            },
            { "name": "full-width", "value": { "type": "boolean" } },
            { "name": "icon-bar", "value": { "type": "boolean" } },
            { "name": "slim", "value": { "type": "boolean" } },
            { "name": "border", "value": { "type": "boolean" } },
            { "name": "hide-one", "value": { "type": "boolean" } },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "stacked", "value": { "type": "boolean" } },
            {
              "name": "dropdown",
              "value": { "type": "array", "default": "[]" }
            },
            { "name": "no-pad", "value": { "type": "false" } },
            {
              "name": "manual-add-items",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "isolated",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "master-id", "value": { "type": "string" } },
            {
              "name": "store-key",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "store-ttl",
              "value": { "type": "number", "default": "0" }
            },
            { "name": "local-storage", "value": { "type": "boolean" } },
            { "name": "_appended", "value": { "type": "Element[]" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "navigation", "type": "array" },
              { "name": "fullWidth", "type": "boolean" },
              { "name": "iconBar", "type": "boolean" },
              { "name": "slim", "type": "boolean" },
              { "name": "border", "type": "boolean" },
              { "name": "hideOne", "type": "boolean" },
              { "name": "flush", "type": "boolean" },
              { "name": "stacked", "type": "boolean" },
              { "name": "dropdown", "type": "array" },
              { "name": "noPad", "type": "false" },
              { "name": "manualAddItems", "type": "boolean" },
              { "name": "isolated", "type": "boolean" },
              { "name": "masterId", "type": "string" },
              { "name": "storeKey", "type": "string" },
              { "name": "storeTtl", "type": "number" },
              { "name": "localStorage", "type": "boolean" },
              { "name": "handleResize" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-note",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "color", "value": { "type": "typeof colors[number]" } },
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "date", "value": { "type": "string", "default": "''" } },
            { "name": "body", "value": { "type": "string", "default": "''" } }
          ],
          "slots": [
            { "name": "caption", "description": "The note's caption." },
            { "name": "date", "description": "The note's date." },
            { "name": "body", "description": "The note's body." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "color", "type": "typeof colors[number]" },
              { "name": "caption", "type": "string" },
              { "name": "date", "type": "string" },
              { "name": "body", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-opt-group",
          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "disabled",
              "description": "Disables all options within the group.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot for `<zn-option>` elements."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "label",
                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
                "type": "string"
              },
              {
                "name": "disabled",
                "description": "Disables all options within the group.",
                "type": "boolean"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-option",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
          "doc-url": "",
          "attributes": [
            {
              "name": "value",
              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "disabled",
              "description": "Draws the option in a disabled state, preventing selection.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "selected",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The option's label." },
            {
              "name": "prefix",
              "description": "Used to prepend an icon or similar element to the menu item."
            },
            {
              "name": "suffix",
              "description": "Used to append an icon or similar element to the menu item."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "multiple", "type": "boolean" },
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "current", "type": "boolean" },
              { "name": "hasHover", "type": "boolean" },
              {
                "name": "value",
                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
                "type": "string"
              },
              {
                "name": "disabled",
                "description": "Draws the option in a disabled state, preventing selection.",
                "type": "boolean"
              },
              { "name": "selected", "type": "boolean" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-order-table",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "data", "value": { "type": "OrderTableData" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "data", "type": "OrderTableData" },
              { "name": "resizeEventHandler" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-page-nav",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "navigation", "value": { "type": "PageNavData" } },
            { "name": "master-id", "value": { "type": "string" } },
            {
              "name": "default-uri",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "active",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "split", "value": { "type": "number" } },
            {
              "name": "split-min",
              "value": { "type": "number", "default": "60" }
            },
            { "name": "split-max", "value": { "type": "number" } },
            {
              "name": "primary-caption",
              "value": { "type": "string", "default": "'Navigation'" }
            },
            {
              "name": "secondary-caption",
              "value": { "type": "string", "default": "'Content'" }
            },
            {
              "name": "no-prefetch",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "local-storage", "value": { "type": "boolean" } },
            { "name": "store-key", "value": { "type": "string" } },
            {
              "name": "store-ttl",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "padded",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "fetch-style",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "full-width",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "padded-right",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "monitor", "value": { "type": "string" } },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "navigation", "type": "PageNavData" },
              { "name": "breadcrumb", "type": "string" },
              { "name": "masterId", "type": "string" },
              { "name": "defaultUri", "type": "string" },
              { "name": "_current", "type": "string" },
              { "name": "_split", "type": "number" },
              { "name": "_splitMin", "type": "number" },
              { "name": "_splitMax", "type": "number" },
              { "name": "primaryCaption", "type": "string" },
              { "name": "secondaryCaption", "type": "string" },
              { "name": "noPrefetch", "type": "boolean" },
              { "name": "localStorage", "type": "boolean" },
              { "name": "storeKey", "type": "string" },
              { "name": "storeTtl", "type": "number" },
              { "name": "padded", "type": "boolean" },
              { "name": "fetchStyle", "type": "string" },
              { "name": "fullWidth", "type": "boolean" },
              { "name": "paddedRight", "type": "boolean" },
              { "name": "monitor", "type": "string" },
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "reRegisterTabs" },
              { "name": "_registerTabs" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-pagination",
          "description": "Pagination component for navigating through pages of content.\n---\n",
          "doc-url": "",
          "attributes": [
            { "name": "limit", "value": { "type": "number", "default": "10" } },
            { "name": "total", "value": { "type": "number", "default": "0" } },
            { "name": "page", "value": { "type": "number", "default": "1" } },
            { "name": "uri", "value": { "type": "string", "default": "\"\"" } }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "limit", "type": "number" },
              { "name": "total", "type": "number" },
              { "name": "page", "type": "number" },
              { "name": "uri", "type": "string" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-pane",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [{ "name": "flush", "type": "boolean" }],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-panel",
          "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "basis-px", "value": { "type": "number" } },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "icon", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            { "name": "tabbed", "value": { "type": "boolean" } },
            { "name": "header-underline", "value": { "type": "boolean" } },
            { "name": "cosmic", "value": { "type": "boolean" } },
            { "name": "flush", "value": { "type": "boolean" } },
            { "name": "flush-x", "value": { "type": "boolean" } },
            { "name": "flush-y", "value": { "type": "boolean" } },
            { "name": "flush-footer", "value": { "type": "boolean" } },
            { "name": "transparent", "value": { "type": "boolean" } },
            { "name": "shadow", "value": { "type": "boolean" } }
          ],
          "slots": [
            { "name": "", "description": "The panel's main content." },
            {
              "name": "actions",
              "description": "Actions displayed in the panel header (buttons, chips, etc)."
            },
            {
              "name": "footer",
              "description": "Content displayed in the panel footer."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "basis", "type": "number" },
              { "name": "caption", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "tabbed", "type": "boolean" },
              { "name": "underlineHeader", "type": "boolean" },
              { "name": "cosmic", "type": "boolean" },
              { "name": "flush", "type": "boolean" },
              { "name": "flushX", "type": "boolean" },
              { "name": "flushY", "type": "boolean" },
              { "name": "flushFooter", "type": "boolean" },
              { "name": "transparent", "type": "boolean" },
              { "name": "shadow", "type": "boolean" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-popup",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "anchor",
              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
              "value": { "type": "Element | string | VirtualElement" }
            },
            {
              "name": "active",
              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "placement",
              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
              "value": {
                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
                "default": "'top'"
              }
            },
            {
              "name": "strategy",
              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
              "value": { "type": "'absolute' | 'fixed'", "default": "'fixed'" }
            },
            {
              "name": "distance",
              "description": "The distance in pixels from which to offset the panel away from its anchor.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "skidding",
              "description": "The distance in pixels from which to offset the panel along its anchor.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "arrow",
              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "arrow-placement",
              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
              "value": {
                "type": "'start' | 'end' | 'center' | 'anchor'",
                "default": "'anchor'"
              }
            },
            {
              "name": "arrow-padding",
              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
              "value": { "type": "number", "default": "10" }
            },
            {
              "name": "flip",
              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flip-fallback-placements",
              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "flip-fallback-strategy",
              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
              "value": {
                "type": "'best-fit' | 'initial'",
                "default": "'best-fit'"
              }
            },
            {
              "name": "flipBoundary",
              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
              "value": { "type": "Element | Element[]" }
            },
            {
              "name": "flip-padding",
              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "shift",
              "description": "Moves the popup along the axis to keep it in view when clipped.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "shiftBoundary",
              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
              "value": { "type": "Element | Element[]" }
            },
            {
              "name": "shift-padding",
              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "auto-size",
              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
              "value": { "type": "'horizontal' | 'vertical' | 'both'" }
            },
            {
              "name": "sync",
              "description": "Syncs the popup's width or height to that of the anchor element.",
              "value": { "type": "'width' | 'height' | 'both'" }
            },
            {
              "name": "autoSizeBoundary",
              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
              "value": { "type": "Element | Element[]" }
            },
            {
              "name": "auto-size-padding",
              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "hover-bridge",
              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              {
                "name": "popup",
                "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
                "type": "HTMLElement"
              },
              {
                "name": "anchor",
                "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
                "type": "Element | string | VirtualElement"
              },
              {
                "name": "active",
                "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
                "type": "boolean"
              },
              {
                "name": "placement",
                "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
              },
              {
                "name": "strategy",
                "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
                "type": "'absolute' | 'fixed'"
              },
              {
                "name": "distance",
                "description": "The distance in pixels from which to offset the panel away from its anchor.",
                "type": "number"
              },
              {
                "name": "skidding",
                "description": "The distance in pixels from which to offset the panel along its anchor.",
                "type": "number"
              },
              {
                "name": "arrow",
                "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
                "type": "boolean"
              },
              {
                "name": "arrowPlacement",
                "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
                "type": "'start' | 'end' | 'center' | 'anchor'"
              },
              {
                "name": "arrowPadding",
                "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
                "type": "number"
              },
              {
                "name": "flip",
                "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
                "type": "boolean"
              },
              {
                "name": "flipFallbackPlacements",
                "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
                "type": "string"
              },
              {
                "name": "flipFallbackStrategy",
                "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
                "type": "'best-fit' | 'initial'"
              },
              {
                "name": "flipBoundary",
                "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
                "type": "Element | Element[]"
              },
              {
                "name": "flipPadding",
                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
                "type": "number"
              },
              {
                "name": "shift",
                "description": "Moves the popup along the axis to keep it in view when clipped.",
                "type": "boolean"
              },
              {
                "name": "shiftBoundary",
                "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
                "type": "Element | Element[]"
              },
              {
                "name": "shiftPadding",
                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
                "type": "number"
              },
              {
                "name": "autoSize",
                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
                "type": "'horizontal' | 'vertical' | 'both'"
              },
              {
                "name": "sync",
                "description": "Syncs the popup's width or height to that of the anchor element.",
                "type": "'width' | 'height' | 'both'"
              },
              {
                "name": "autoSizeBoundary",
                "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
                "type": "Element | Element[]"
              },
              {
                "name": "autoSizePadding",
                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
                "type": "number"
              },
              {
                "name": "hoverBridge",
                "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
                "type": "boolean"
              },
              { "name": "handleAnchorHover" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-priority-list",
          "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
          "doc-url": "",
          "attributes": [
            {
              "name": "name",
              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
              "value": { "type": "string[]" }
            },
            {
              "name": "label",
              "description": "The component's label. Required for proper accessibility.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "Help text that describes how to use the component.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "form",
              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "size",
              "description": "The size of the list items.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "disabled",
              "description": "Whether the priority list is disabled.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "required",
              "description": "Ensures the form control has a value before allowing submission.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "priority-start",
              "description": "The starting priority number. Defaults to 1.",
              "value": { "type": "number", "default": "1" }
            },
            {
              "name": "formaction",
              "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
              "value": { "type": "string" }
            },
            {
              "name": "order",
              "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
            },
            {
              "name": "label",
              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text displayed in a tooltip next to the label."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-change",
              "description": "Emitted when the order of items changes."
            },
            {
              "name": "zn-reorder",
              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
            }
          ],
          "js": {
            "properties": [
              { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
              {
                "name": "name",
                "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
                "type": "string[]"
              },
              { "name": "defaultValue", "type": "string[]" },
              {
                "name": "label",
                "description": "The component's label. Required for proper accessibility.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label.",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "Help text that describes how to use the component.",
                "type": "string"
              },
              {
                "name": "form",
                "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The size of the list items.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "disabled",
                "description": "Whether the priority list is disabled.",
                "type": "boolean"
              },
              {
                "name": "required",
                "description": "Ensures the form control has a value before allowing submission.",
                "type": "boolean"
              },
              {
                "name": "priorityStart",
                "description": "The starting priority number. Defaults to 1.",
                "type": "number"
              },
              {
                "name": "formAction",
                "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
                "type": "string"
              },
              {
                "name": "order",
                "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
                "type": "string"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object.",
                "type": "ValidityState"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "zn-change",
                "description": "Emitted when the order of items changes."
              },
              {
                "name": "zn-reorder",
                "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
              }
            ]
          }
        },
        {
          "name": "zn-progress-bar",
          "description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-primary** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string | undefined" } },
            {
              "name": "description",
              "value": { "type": "string | undefined" }
            },
            { "name": "value", "value": { "type": "number | undefined" } },
            {
              "name": "show-progress",
              "value": { "type": "boolean | undefined" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "caption", "type": "string | undefined" },
              { "name": "description", "type": "string | undefined" },
              { "name": "value", "type": "number | undefined" },
              { "name": "showProgress", "type": "boolean | undefined" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-progress-tile",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "start-time", "value": { "type": "number" } },
            { "name": "wait-time", "value": { "type": "number" } },
            { "name": "max-time", "value": { "type": "number" } },
            { "name": "end-time", "value": { "type": "number" } },
            { "name": "max-wait-time", "value": { "type": "number" } },
            {
              "name": "waiting-agent-response",
              "value": { "type": "boolean" }
            },
            { "name": "status", "value": { "type": "string" } },
            { "name": "avatar", "value": { "type": "string" } },
            { "name": "caption", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "startTime", "type": "number" },
              { "name": "waitTime", "type": "number" },
              { "name": "maxTime", "type": "number" },
              { "name": "endTime", "type": "number" },
              { "name": "maxWaitTime", "type": "number" },
              { "name": "waitingAgentResponse", "type": "boolean" },
              { "name": "status", "type": "string" },
              { "name": "avatar", "type": "string" },
              { "name": "caption", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-query-builder",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "filters",
              "value": { "type": "QueryBuilderData", "default": "[]" }
            },
            {
              "name": "dropdown",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "PropertyKey" } },
            {
              "name": "show-values",
              "value": { "type": "string[]", "default": "[]" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "container", "type": "HTMLDivElement" },
              { "name": "addRule", "type": "ZnSelect" },
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "filters", "type": "QueryBuilderData" },
              { "name": "dropdown", "type": "boolean" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "PropertyKey" },
              { "name": "showValues", "type": "string[]" },
              { "name": "validationMessage", "type": "string" },
              { "name": "validity", "type": "ValidityState" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-radio",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the radio loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the radio gains focus.\n- **zn-input** - Emitted when the radio receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n- **description** - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the radio's checked state.\n- **control--checked** - Matches the control part when the radio is checked.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **label** - The container that wraps the radio's label.\n- **description** - The container that wraps the radio's description.\n- **selected-content** - The container that wraps optional content that appears when a radio is checked.",
          "doc-url": "",
          "attributes": [
            { "name": "title", "value": { "type": "string", "default": "''" } },
            {
              "name": "name",
              "description": "The name of the radio, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current value of the radio, submitted as a name/value pair with form data.",
              "value": { "type": "string" }
            },
            {
              "name": "size",
              "description": "The radio's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "disabled",
              "description": "Disables the radio.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "checked",
              "description": "Draws the radio in a checked state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "contained",
              "description": "Draws a container around the radio.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "horizontal",
              "description": "Applies styles relevant to radios in a horizontal layout.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "Makes the radio a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "description",
              "description": "The radio's help text. If you need to display HTML, use the `description` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "label", "value": { "type": "string" } },
            { "name": "label-tooltip", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The radio's label." },
            {
              "name": "description",
              "description": "A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute."
            },
            {
              "name": "selected-content",
              "description": "Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the radio loses focus."
            },
            {
              "name": "zn-change",
              "description": "Emitted when the checked state changes."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the radio gains focus."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the radio receives input."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "title", "type": "string" },
              {
                "name": "name",
                "description": "The name of the radio, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the radio, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The radio's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "disabled",
                "description": "Disables the radio.",
                "type": "boolean"
              },
              {
                "name": "checked",
                "description": "Draws the radio in a checked state.",
                "type": "boolean"
              },
              {
                "name": "contained",
                "description": "Draws a container around the radio.",
                "type": "boolean"
              },
              {
                "name": "horizontal",
                "description": "Applies styles relevant to radios in a horizontal layout.",
                "type": "boolean"
              },
              {
                "name": "defaultChecked",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Makes the radio a required field.",
                "type": "boolean"
              },
              {
                "name": "description",
                "description": "The radio's help text. If you need to display HTML, use the `description` slot instead.",
                "type": "string"
              },
              { "name": "label", "type": "string" },
              { "name": "labelTooltip", "type": "string" },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the radio loses focus."
              },
              {
                "name": "zn-change",
                "description": "Emitted when the checked state changes."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the radio gains focus."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the radio receives input."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-radio-group",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "name",
              "description": "The name of the radio group, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "size",
              "description": "The radio group's size. This size will be applied to all child radios",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "horizontal",
              "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "contained",
              "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "required",
              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "validationInput", "type": "HTMLInputElement" },
              { "name": "defaultValue", "type": "string" },
              {
                "name": "label",
                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "name",
                "description": "The name of the radio group, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The radio group's size. This size will be applied to all child radios",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "horizontal",
                "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
                "type": "boolean"
              },
              {
                "name": "contained",
                "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
                "type": "boolean"
              },
              { "name": "validity" },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-rating",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "label", "value": { "type": "string" } },
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "number", "default": "0" } },
            { "name": "max", "value": { "type": "number", "default": "5" } },
            {
              "name": "precision",
              "value": { "type": "number", "default": "1" }
            },
            {
              "name": "readonly",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "size",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "getSymbol",
              "value": { "type": "(value: number) => string" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "rating", "type": "HTMLElement" },
              { "name": "label", "type": "string" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "number" },
              { "name": "max", "type": "number" },
              { "name": "precision", "type": "number" },
              { "name": "readonly", "type": "boolean" },
              { "name": "disabled", "type": "boolean" },
              { "name": "size", "type": "'small' | 'medium' | 'large'" },
              { "name": "getSymbol", "type": "(value: number) => string" },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-reveal",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "duration",
              "value": { "type": "number", "default": "2000" }
            },
            {
              "name": "initial",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "revealed",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "duration", "type": "number" },
              { "name": "initial", "type": "string" },
              { "name": "revealed", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-scroll-container",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "start-scrolled",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [{ "name": "startScrolled", "type": "boolean" }],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-select",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the control's value changes.\n- **zn-clear** - Emitted when the control's value is cleared.\n- **zn-input** - Emitted when the control receives input.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-blur** - Emitted when the control loses focus.\n- **zn-show** - Emitted when the select's menu opens.\n- **zn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **zn-hide** - Emitted when the select's menu closes.\n- **zn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-load** - Emitted when options have been successfully loaded from the `src` URL.\n- **zn-error** - Emitted when loading options from the `src` URL fails.\n\n### **Methods:**\n - **fetchOptions(searchQuery: _string_)** - Fetches options from the URL specified by the `data-uri` property. Optionally appends a search query.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **search-loading** - The container shown while a remote search request is in flight.\n- **max-results-indicator** - The message shown when results are truncated by `max-results`.\n- **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
          "doc-url": "",
          "attributes": [
            {
              "name": "name",
              "description": "The name of the select, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "non-removable",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "value",
              "description": "The default value of the form control. Primarily used for resetting the form control.",
              "value": { "type": "string | string[]", "default": "''" }
            },
            {
              "name": "size",
              "description": "The select's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "placeholder",
              "description": "Placeholder text to show as a hint when the select is empty.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "multiple",
              "description": "Allows more than one option to be selected.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "max-options",
              "description": "Max number of options that can be selected when `multiple` is true. Set to 0 to allow unlimited selections.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "max-options-visible",
              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
              "value": { "type": "number", "default": "3" }
            },
            {
              "name": "disabled",
              "description": "Disables the select control.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "clearable",
              "description": "Adds a clear button when the select is not empty.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "open",
              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "hoist",
              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "pill",
              "description": "Draws a pill-style select with rounded edges.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "search",
              "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "context-note",
              "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "placement",
              "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.",
              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
            },
            {
              "name": "help-text",
              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string" }
            },
            {
              "name": "required",
              "description": "The select's required attribute.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "cache-key",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "trigger-submit",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "getTag",
              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
              "value": {
                "type": "(option: ZnOption, index: number) => TemplateResult | string | HTMLElement"
              }
            },
            {
              "name": "select-first",
              "description": "Automatically select the first option if no value is set.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "distinct",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "conditional",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "data-uri",
              "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",
              "value": { "type": "string" }
            },
            {
              "name": "context-data",
              "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
              "value": { "type": "string" }
            },
            {
              "name": "max-results",
              "description": "The maximum number of options to display from a remote fetch response. Set to 0 for unlimited.\nOnly applies when fetching from `data-uri`.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "search-debounce",
              "description": "Debounce delay in milliseconds for remote search requests. The component waits this long after the user\nstops typing before sending a request.",
              "value": { "type": "number", "default": "300" }
            },
            {
              "name": "search-param",
              "description": "The query parameter name appended to the `data-uri` URL for remote search requests.\nDefaults to `\"q\"`, e.g. `/api/items?q=search+term`. Set to a custom value like `\"search\"` or `\"filter\"` to match your API.",
              "value": { "type": "string", "default": "'q'" }
            },
            {
              "name": "search-only",
              "description": "When set alongside `search` and `data-uri`, the component will not fetch options on initial load.\nOptions are only fetched when the user starts typing a search query.",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually."
            },
            {
              "name": "label",
              "description": "The input's label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "context-note",
              "description": "Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute."
            },
            {
              "name": "prefix",
              "description": "Used to prepend a presentational icon or similar element to the combobox."
            },
            {
              "name": "clear-icon",
              "description": "An icon to use in lieu of the default clear icon."
            },
            {
              "name": "expand-icon",
              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-change",
              "description": "Emitted when the control's value changes."
            },
            {
              "name": "zn-clear",
              "description": "Emitted when the control's value is cleared."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the control receives input."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the control gains focus."
            },
            {
              "name": "zn-blur",
              "description": "Emitted when the control loses focus."
            },
            {
              "name": "zn-show",
              "description": "Emitted when the select's menu opens."
            },
            {
              "name": "zn-after-show",
              "description": "Emitted after the select's menu opens and all animations are complete."
            },
            {
              "name": "zn-hide",
              "description": "Emitted when the select's menu closes."
            },
            {
              "name": "zn-after-hide",
              "description": "Emitted after the select's menu closes and all animations are complete."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            },
            {
              "name": "zn-load",
              "description": "Emitted when options have been successfully loaded from the `src` URL."
            },
            {
              "name": "zn-error",
              "description": "Emitted when loading options from the `src` URL fails."
            }
          ],
          "js": {
            "properties": [
              { "name": "popup", "type": "ZnPopup" },
              { "name": "combobox", "type": "HTMLSlotElement" },
              { "name": "displayInput", "type": "HTMLInputElement" },
              { "name": "valueInput", "type": "HTMLInputElement" },
              { "name": "listbox", "type": "HTMLSlotElement" },
              { "name": "prefixSlot", "type": "HTMLSlotElement" },
              { "name": "displayLabel", "type": "string" },
              { "name": "currentOption", "type": "ZnOption" },
              { "name": "selectedOptions", "type": "ZnOption[]" },
              {
                "name": "name",
                "description": "The name of the select, submitted as a name/value pair with form data.",
                "type": "string"
              },
              { "name": "nonRemovable", "type": "boolean" },
              {
                "name": "value",
                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue property will be an array. Values may contain spaces when using JSON array syntax in the attribute,\ne.g. `value='[\"my value\", \"their value\"]'`. Space-delimited strings are still supported for backward compatibility."
              },
              {
                "name": "defaultValue",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "string | string[]"
              },
              {
                "name": "size",
                "description": "The select's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text to show as a hint when the select is empty.",
                "type": "string"
              },
              {
                "name": "multiple",
                "description": "Allows more than one option to be selected.",
                "type": "boolean"
              },
              {
                "name": "maxOptions",
                "description": "Max number of options that can be selected when `multiple` is true. Set to 0 to allow unlimited selections.",
                "type": "number"
              },
              {
                "name": "maxOptionsVisible",
                "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
                "type": "number"
              },
              {
                "name": "disabled",
                "description": "Disables the select control.",
                "type": "boolean"
              },
              {
                "name": "clearable",
                "description": "Adds a clear button when the select is not empty.",
                "type": "boolean"
              },
              {
                "name": "open",
                "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
                "type": "boolean"
              },
              {
                "name": "hoist",
                "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
                "type": "boolean"
              },
              {
                "name": "pill",
                "description": "Draws a pill-style select with rounded edges.",
                "type": "boolean"
              },
              {
                "name": "search",
                "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "contextNote",
                "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
                "type": "string"
              },
              {
                "name": "placement",
                "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.",
                "type": "'top' | 'bottom'"
              },
              {
                "name": "helpText",
                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              {
                "name": "required",
                "description": "The select's required attribute.",
                "type": "boolean"
              },
              { "name": "cacheKey", "type": "string" },
              { "name": "triggerSubmit", "type": "boolean" },
              {
                "name": "getTag",
                "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
                "type": "(option: ZnOption, index: number) => TemplateResult | string | HTMLElement"
              },
              {
                "name": "selectFirst",
                "description": "Automatically select the first option if no value is set.",
                "type": "boolean"
              },
              { "name": "distinct", "type": "string" },
              { "name": "conditional", "type": "string" },
              {
                "name": "dataUri",
                "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",
                "type": "string"
              },
              {
                "name": "contextData",
                "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
                "type": "string"
              },
              {
                "name": "maxResults",
                "description": "The maximum number of options to display from a remote fetch response. Set to 0 for unlimited.\nOnly applies when fetching from `data-uri`.",
                "type": "number"
              },
              {
                "name": "searchDebounce",
                "description": "Debounce delay in milliseconds for remote search requests. The component waits this long after the user\nstops typing before sending a request.",
                "type": "number"
              },
              {
                "name": "searchParam",
                "description": "The query parameter name appended to the `data-uri` URL for remote search requests.\nDefaults to `\"q\"`, e.g. `/api/items?q=search+term`. Set to a custom value like `\"search\"` or `\"filter\"` to match your API.",
                "type": "string"
              },
              {
                "name": "searchOnly",
                "description": "When set alongside `search` and `data-uri`, the component will not fetch options on initial load.\nOptions are only fetched when the user starts typing a search query.",
                "type": "boolean"
              },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-change",
                "description": "Emitted when the control's value changes."
              },
              {
                "name": "zn-clear",
                "description": "Emitted when the control's value is cleared."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the control receives input."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the control gains focus."
              },
              {
                "name": "zn-blur",
                "description": "Emitted when the control loses focus."
              },
              {
                "name": "zn-show",
                "description": "Emitted when the select's menu opens."
              },
              {
                "name": "zn-after-show",
                "description": "Emitted after the select's menu opens and all animations are complete."
              },
              {
                "name": "zn-hide",
                "description": "Emitted when the select's menu closes."
              },
              {
                "name": "zn-after-hide",
                "description": "Emitted after the select's menu closes and all animations are complete."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              },
              {
                "name": "zn-load",
                "description": "Emitted when options have been successfully loaded from the `src` URL."
              },
              {
                "name": "zn-error",
                "description": "Emitted when loading options from the `src` URL fails."
              }
            ]
          }
        },
        {
          "name": "zn-settings-container",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "position",
              "value": {
                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'",
                "default": "'bottom-start'"
              }
            },
            { "name": "store-key", "value": { "type": "string" } },
            { "name": "no-scroll", "value": { "type": "boolean" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "filters", "type": "SettingsContainerFilter[]" },
              {
                "name": "position",
                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'"
              },
              { "name": "storeKey", "type": "string" },
              { "name": "noScroll", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-sidebar",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string" } },
            {
              "name": "open",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "start-scrolled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "wide",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "open", "type": "boolean" },
              { "name": "startScrolled", "type": "boolean" },
              { "name": "wide", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-simple-chart",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "datasets", "value": { "type": "any[]" } },
            { "name": "labels", "value": { "type": "any[]" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "datasets", "type": "any[]" },
              { "name": "labels", "type": "any[]" },
              { "name": "myChart", "type": "Chart" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-skeleton",
          "description": "Skeleton loaders provide visual placeholders while content is loading, improving perceived performance and user experience.\n---\n",
          "doc-url": "",
          "attributes": [
            {
              "name": "speed",
              "description": "Animation speed for the shimmer effect. Default: \"3s\"",
              "value": { "type": "string", "default": "'3s'" }
            },
            {
              "name": "width",
              "description": "Width of the skeleton element. Default: \"100%\"",
              "value": { "type": "string", "default": "'100%'" }
            },
            {
              "name": "height",
              "description": "Height of the skeleton element. Default: \"20px\"",
              "value": { "type": "string", "default": "'20px'" }
            },
            {
              "name": "radius",
              "description": "Border radius of the skeleton element. Default: \"4px\"",
              "value": { "type": "string", "default": "'4px'" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "speed",
                "description": "Animation speed for the shimmer effect. Default: \"3s\"",
                "type": "string"
              },
              {
                "name": "width",
                "description": "Width of the skeleton element. Default: \"100%\"",
                "type": "string"
              },
              {
                "name": "height",
                "description": "Height of the skeleton element. Default: \"20px\"",
                "type": "string"
              },
              {
                "name": "radius",
                "description": "Border radius of the skeleton element. Default: \"4px\"",
                "type": "string"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-slideout",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the slideout is opens.\n- **zn-close** - Emitted when the slideout is closed.\n- **zn-request-close** - Emitted when the user attempts to close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the slideout open. Avoid using this unless closing the slideout will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the slideout.\n- **hide()** - Hides the slideout.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The slideout's label. Alternatively you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the slideout. Note the slideout will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The slideout's header. This element wraps the title and header actions.\n- **close-button** - The slideout's close button.\n- **close-button__base** - The close buttons exported `base` part.\n- **body** - The slideout's body.",
          "doc-url": "",
          "attributes": [
            {
              "name": "open",
              "description": "Indicated whether of not the slideout is open. You can toggle this attribute to show and hide the slideout, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the slideout's state.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "label",
              "description": "The slideout's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string" }
            },
            {
              "name": "trigger",
              "description": "The slideout's trigger element. This is used to open the slideout when clicked. If you do not provide a trigger, you\nwill need to manually open the slideout using the `show()` method.",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            {
              "name": "label",
              "description": "The slideout's label. Alternatively you can use the `label` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-show",
              "description": "Emitted when the slideout is opens."
            },
            {
              "name": "zn-close",
              "description": "Emitted when the slideout is closed."
            },
            {
              "name": "zn-request-close",
              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
              "description": "Emitted when the user attempts to close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the slideout open. Avoid using this unless closing the slideout will result in destructive behavior such as data loss."
            }
          ],
          "js": {
            "properties": [
              { "name": "slideout", "type": "HTMLDialogElement" },
              { "name": "panel", "type": "HTMLElement" },
              { "name": "overlay", "type": "HTMLElement" },
              {
                "name": "open",
                "description": "Indicated whether of not the slideout is open. You can toggle this attribute to show and hide the slideout, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the slideout's state.",
                "type": "boolean"
              },
              {
                "name": "label",
                "description": "The slideout's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "trigger",
                "description": "The slideout's trigger element. This is used to open the slideout when clicked. If you do not provide a trigger, you\nwill need to manually open the slideout using the `show()` method.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "zn-show",
                "description": "Emitted when the slideout is opens."
              },
              {
                "name": "zn-close",
                "description": "Emitted when the slideout is closed."
              },
              {
                "name": "zn-request-close",
                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
                "description": "Emitted when the user attempts to close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the slideout open. Avoid using this unless closing the slideout will result in destructive behavior such as data loss."
              }
            ]
          }
        },
        {
          "name": "zn-sp",
          "description": "A flexible layout container for spacing and arranging child elements in rows or columns with configurable gap, padding, and dividers.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "divide",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "gap", "value": { "type": "keyof typeof defaultSizes" } },
            {
              "name": "row",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "grow",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "pad-x",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "pad-y",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-gap",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "no-pos",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-x",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-y",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-t",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-b",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-l",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush-r",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "width-container",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form-container",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "wide-form-container",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "divide", "type": "boolean" },
              { "name": "gap", "type": "keyof typeof defaultSizes" },
              { "name": "row", "type": "boolean" },
              { "name": "grow", "type": "boolean" },
              { "name": "padX", "type": "boolean" },
              { "name": "padY", "type": "boolean" },
              { "name": "noGap", "type": "boolean" },
              { "name": "noPosition", "type": "boolean" },
              { "name": "flush", "type": "boolean" },
              { "name": "flushX", "type": "boolean" },
              { "name": "flushY", "type": "boolean" },
              { "name": "flushT", "type": "boolean" },
              { "name": "flushB", "type": "boolean" },
              { "name": "flushL", "type": "boolean" },
              { "name": "flushR", "type": "boolean" },
              { "name": "widthContainer", "type": "boolean" },
              { "name": "formContainer", "type": "boolean" },
              { "name": "wideFormContainer", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-split-button",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string" } },
            { "name": "href", "value": { "type": "string" } },
            { "name": "name", "value": { "type": "string" } },
            { "name": "value", "value": { "type": "string" } },
            { "name": "type", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "href", "type": "string" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "defaultValue", "type": "string" },
              { "name": "type", "type": "string" },
              { "name": "dropdown", "type": "ZnDropdown" },
              { "name": "button", "type": "ZnButton" },
              { "name": "validity" },
              { "name": "validationMessage" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-split-pane",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "pixels",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "secondary",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "min-size",
              "value": { "type": "number", "default": "10" }
            },
            { "name": "max-size", "value": { "type": "number" } },
            {
              "name": "initial-size",
              "value": { "type": "number", "default": "50" }
            },
            {
              "name": "store-key",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "bordered",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "vertical",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "primary-caption",
              "value": { "type": "string", "default": "'Primary'" }
            },
            {
              "name": "secondary-caption",
              "value": { "type": "string", "default": "'Secondary'" }
            },
            {
              "name": "focus-pane",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "padded",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "padded-right",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "local-storage", "value": { "type": "boolean" } },
            {
              "name": "store-ttl",
              "value": { "type": "number", "default": "0" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "storage", "type": "Storage" },
              { "name": "mouseMoveHandler", "type": "null | EventListener" },
              { "name": "mouseUpHandler", "type": "null | EventListener" },
              { "name": "calculatePixels", "type": "boolean" },
              { "name": "preferSecondarySize", "type": "boolean" },
              { "name": "minimumPaneSize", "type": "number" },
              { "name": "maximumPaneSize", "type": "number" },
              { "name": "initialSize", "type": "number" },
              { "name": "storeKey", "type": "string" },
              { "name": "border", "type": "boolean" },
              { "name": "vertical", "type": "boolean" },
              { "name": "primaryCaption", "type": "string" },
              { "name": "secondaryCaption", "type": "string" },
              { "name": "_focusPane", "type": "number" },
              { "name": "padded", "type": "boolean" },
              { "name": "paddedRight", "type": "boolean" },
              { "name": "localStorage", "type": "boolean" },
              { "name": "storeTtl", "type": "number" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-stat",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "caption",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "description",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "amount",
              "value": { "type": "string", "default": "'0'" }
            },
            {
              "name": "type",
              "value": { "type": "string", "default": "'number'" }
            },
            {
              "name": "previous",
              "value": { "type": "string", "default": "'0'" }
            },
            {
              "name": "currency",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "show-delta",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "color",
              "value": {
                "type": "'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral'",
                "default": "'primary'"
              }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "amount", "type": "string" },
              { "name": "type", "type": "string" },
              { "name": "previous", "type": "string" },
              { "name": "currency", "type": "string" },
              { "name": "showDelta", "type": "boolean" },
              {
                "name": "color",
                "type": "'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral'"
              }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-status-indicator",
          "description": "Circular status indicators.\n---\n",
          "doc-url": "",
          "attributes": [
            {
              "name": "type",
              "value": {
                "type": "'success' | 'error' | 'warning' | 'info'",
                "default": "'info'"
              }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "type",
                "type": "'success' | 'error' | 'warning' | 'info'"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-stepper",
          "description": "Steppers provide visual feedback about progress through a multi-step process or workflow.\n---\n\n\n### **CSS Parts:**\n - **step-container** - The container holding the progress line and steps.\n- **step-line** - The background line showing the full step track.\n- **step-progress** - The filled progress indicator showing completion.\n- **steps** - The container for individual step markers.\n- **step** - An individual step marker circle.\n- **header** - The header container with caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress count text (e.g., \"2 / 5 steps\").\n- **label** - The label text container.\n- **info** - The label text element.",
          "doc-url": "",
          "attributes": [
            {
              "name": "caption",
              "description": "A descriptive label displayed above the stepper to indicate the current step or phase.",
              "value": { "type": "string" }
            },
            {
              "name": "label",
              "description": "An optional label displayed above the caption, typically used for the wizard or workflow name.",
              "value": { "type": "string" }
            },
            {
              "name": "steps",
              "description": "The total number of steps in the process.",
              "value": { "type": "number" }
            },
            {
              "name": "value",
              "description": "The current step position (0 to steps). Progress is calculated as value/steps.",
              "value": { "type": "number" }
            },
            { "name": "show-progress", "value": { "type": "boolean" } }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "caption",
                "description": "A descriptive label displayed above the stepper to indicate the current step or phase.",
                "type": "string"
              },
              {
                "name": "label",
                "description": "An optional label displayed above the caption, typically used for the wizard or workflow name.",
                "type": "string"
              },
              {
                "name": "steps",
                "description": "The total number of steps in the process.",
                "type": "number"
              },
              {
                "name": "value",
                "description": "The current step position (0 to steps). Progress is calculated as value/steps.",
                "type": "number"
              },
              { "name": "showProgress", "type": "boolean" },
              {
                "name": "show-progress",
                "description": "When true, displays the step count (e.g., \"2 / 5 steps\") next to the caption.",
                "type": "boolean"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-style",
          "description": "\n---\n",
          "doc-url": "",
          "attributes": [
            { "name": "color", "value": { "type": "string", "default": "''" } },
            {
              "name": "border",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "error",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "success",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "info",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "warning",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "primary",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "accent",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "center",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "display",
              "value": { "type": "null", "default": "null" }
            },
            { "name": "font", "value": { "type": "string", "default": "''" } },
            { "name": "width", "value": { "type": "string", "default": "''" } },
            {
              "name": "height",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "pad", "value": { "type": "string", "default": "''" } },
            {
              "name": "margin",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "a-margin",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "color", "type": "string" },
              { "name": "border", "type": "boolean" },
              { "name": "error", "type": "boolean" },
              { "name": "success", "type": "boolean" },
              { "name": "info", "type": "boolean" },
              { "name": "warning", "type": "boolean" },
              { "name": "primary", "type": "boolean" },
              { "name": "accent", "type": "boolean" },
              { "name": "center", "type": "boolean" },
              { "name": "display", "type": "null" },
              { "name": "font", "type": "string" },
              { "name": "width", "type": "string" },
              { "name": "height", "type": "string" },
              { "name": "pad", "type": "string" },
              { "name": "margin", "type": "string" },
              { "name": "autoMargin", "type": "string" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-table",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "fixed-first",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "has-actions",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "headless",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "left-align",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "data", "value": { "type": "any" } },
            {
              "name": "bool-icons",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "fixedFirst", "type": "boolean" },
              { "name": "hasActions", "type": "boolean" },
              { "name": "headless", "type": "boolean" },
              { "name": "allLeft", "type": "boolean" },
              { "name": "data", "type": "any" },
              { "name": "boolIcons", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-tabs",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "master-id", "value": { "type": "string" } },
            {
              "name": "default-uri",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "active",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "split", "value": { "type": "number" } },
            {
              "name": "split-min",
              "value": { "type": "number", "default": "60" }
            },
            { "name": "split-max", "value": { "type": "number" } },
            {
              "name": "primary-caption",
              "value": { "type": "string", "default": "'Navigation'" }
            },
            {
              "name": "secondary-caption",
              "value": { "type": "string", "default": "'Content'" }
            },
            {
              "name": "no-prefetch",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "local-storage", "value": { "type": "boolean" } },
            { "name": "store-key", "value": { "type": "string" } },
            {
              "name": "store-ttl",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "padded",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "fetch-style",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "full-width",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "padded-right",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "monitor", "value": { "type": "string" } },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "masterId", "type": "string" },
              { "name": "defaultUri", "type": "string" },
              { "name": "_current", "type": "string" },
              { "name": "_split", "type": "number" },
              { "name": "_splitMin", "type": "number" },
              { "name": "_splitMax", "type": "number" },
              { "name": "primaryCaption", "type": "string" },
              { "name": "secondaryCaption", "type": "string" },
              { "name": "noPrefetch", "type": "boolean" },
              { "name": "localStorage", "type": "boolean" },
              { "name": "storeKey", "type": "string" },
              { "name": "storeTtl", "type": "number" },
              { "name": "padded", "type": "boolean" },
              { "name": "fetchStyle", "type": "string" },
              { "name": "fullWidth", "type": "boolean" },
              { "name": "paddedRight", "type": "boolean" },
              { "name": "monitor", "type": "string" },
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "reRegisterTabs" },
              { "name": "_registerTabs" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-textarea",
          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textareas label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
          "doc-url": "",
          "attributes": [
            { "name": "title", "value": { "type": "string", "default": "''" } },
            {
              "name": "name",
              "description": "The name of the textarea, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "value",
              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "size",
              "description": "The text area's size.",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "label",
              "description": "The textarea label. If you need to display HTML, use the `label` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "label-tooltip",
              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "context-note",
              "description": "Text that appears above the textarea, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "help-text",
              "description": "The text area's help text. If you need to display HTML, use the `help-text` slot instead.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "placeholder",
              "description": "Placeholder text to show as a hint when the input is empty.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "rows",
              "description": "The number of rows to display by default.",
              "value": { "type": "number", "default": "4" }
            },
            {
              "name": "resize",
              "description": "Controls how the textarea can be resized.",
              "value": {
                "type": "'none' | 'vertical' | 'auto'",
                "default": "'vertical'"
              }
            },
            {
              "name": "disabled",
              "description": "Disables the textarea.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "readonly",
              "description": "Makes the textarea readonly.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "form",
              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "required",
              "description": "Makes the textarea a required field.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "minlength",
              "description": "The minimum length of input that will be considered valid.",
              "value": { "type": "number" }
            },
            {
              "name": "maxlength",
              "description": "The maximum length of input that will be considered valid.",
              "value": { "type": "number" }
            },
            {
              "name": "autocapitalize",
              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
              "value": {
                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
              }
            },
            {
              "name": "autocorrect",
              "description": "Indicates whether the browser's autocorrect feature is on or off.",
              "value": { "type": "string" }
            },
            {
              "name": "autocomplete",
              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
              "value": { "type": "string" }
            },
            {
              "name": "autofocus",
              "description": "Indicates that the input should receive focus on page load.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enterkeyhint",
              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
              "value": {
                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
              }
            },
            {
              "name": "spellcheck",
              "description": "Enables spell checking on the textarea.",
              "value": { "type": "boolean", "default": "true" }
            },
            {
              "name": "inputmode",
              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
              "value": {
                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
              }
            },
            {
              "name": "transparent",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [
            {
              "name": "label",
              "description": "The textareas label. Alternatively, you can use the `label` attribute."
            },
            {
              "name": "label-tooltip",
              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
            },
            {
              "name": "context-note",
              "description": "Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute."
            },
            {
              "name": "help-text",
              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
            }
          ],
          "events": [
            {
              "name": "zn-blur",
              "description": "Emitted when the control loses focus."
            },
            {
              "name": "zn-change",
              "description": "Emitted when an alteration to the control's value is committed by the user."
            },
            {
              "name": "zn-focus",
              "description": "Emitted when the control gains focus."
            },
            {
              "name": "zn-input",
              "description": "Emitted when the control receives input."
            },
            {
              "name": "zn-invalid",
              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
            }
          ],
          "js": {
            "properties": [
              { "name": "formControl", "type": "HTMLElement" },
              { "name": "input", "type": "HTMLTextAreaElement" },
              { "name": "hasFocus", "type": "boolean" },
              { "name": "title", "type": "string" },
              {
                "name": "name",
                "description": "The name of the textarea, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The current value of the textarea, submitted as a name/value pair with form data.",
                "type": "string"
              },
              {
                "name": "size",
                "description": "The text area's size.",
                "type": "'small' | 'medium' | 'large'"
              },
              {
                "name": "label",
                "description": "The textarea label. If you need to display HTML, use the `label` slot instead.",
                "type": "string"
              },
              {
                "name": "labelTooltip",
                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
                "type": "string"
              },
              {
                "name": "contextNote",
                "description": "Text that appears above the textarea, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.",
                "type": "string"
              },
              {
                "name": "helpText",
                "description": "The text area's help text. If you need to display HTML, use the `help-text` slot instead.",
                "type": "string"
              },
              {
                "name": "placeholder",
                "description": "Placeholder text to show as a hint when the input is empty.",
                "type": "string"
              },
              {
                "name": "rows",
                "description": "The number of rows to display by default.",
                "type": "number"
              },
              {
                "name": "resize",
                "description": "Controls how the textarea can be resized.",
                "type": "'none' | 'vertical' | 'auto'"
              },
              {
                "name": "disabled",
                "description": "Disables the textarea.",
                "type": "boolean"
              },
              {
                "name": "readonly",
                "description": "Makes the textarea readonly.",
                "type": "boolean"
              },
              {
                "name": "form",
                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                "type": "string"
              },
              { "name": "flush", "type": "boolean" },
              {
                "name": "required",
                "description": "Makes the textarea a required field.",
                "type": "boolean"
              },
              {
                "name": "minlength",
                "description": "The minimum length of input that will be considered valid.",
                "type": "number"
              },
              {
                "name": "maxlength",
                "description": "The maximum length of input that will be considered valid.",
                "type": "number"
              },
              {
                "name": "autocapitalize",
                "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
              },
              {
                "name": "autocorrect",
                "description": "Indicates whether the browser's autocorrect feature is on or off.",
                "type": "string"
              },
              {
                "name": "autocomplete",
                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
                "type": "string"
              },
              {
                "name": "autofocus",
                "description": "Indicates that the input should receive focus on page load.",
                "type": "boolean"
              },
              {
                "name": "enterkeyhint",
                "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
              },
              {
                "name": "spellcheck",
                "description": "Enables spell checking on the textarea.",
                "type": "boolean"
              },
              {
                "name": "inputmode",
                "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
              },
              {
                "name": "defaultValue",
                "description": "The default value of the form control. Primarily used for resetting the form control.",
                "type": "string"
              },
              { "name": "transparent", "type": "boolean" },
              {
                "name": "validity",
                "description": "Gets the validity state object"
              },
              {
                "name": "validationMessage",
                "description": "Gets the validation message"
              }
            ],
            "events": [
              {
                "name": "zn-blur",
                "description": "Emitted when the control loses focus."
              },
              {
                "name": "zn-change",
                "description": "Emitted when an alteration to the control's value is committed by the user."
              },
              {
                "name": "zn-focus",
                "description": "Emitted when the control gains focus."
              },
              {
                "name": "zn-input",
                "description": "Emitted when the control receives input."
              },
              {
                "name": "zn-invalid",
                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
              }
            ]
          }
        },
        {
          "name": "zn-tile",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            { "name": "href", "value": { "type": "string" } },
            { "name": "data-target", "value": { "type": "string" } },
            { "name": "gaid", "value": { "type": "string" } },
            { "name": "data-uri", "value": { "type": "string" } },
            { "name": "flush", "value": { "type": "boolean" } },
            { "name": "flush-x", "value": { "type": "boolean" } },
            { "name": "flush-y", "value": { "type": "boolean" } },
            { "name": "inline", "value": { "type": "boolean" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "href", "type": "string" },
              { "name": "dataTarget", "type": "string" },
              { "name": "gaid", "type": "string" },
              { "name": "dataUri", "type": "string" },
              { "name": "flush", "type": "boolean" },
              { "name": "flushX", "type": "boolean" },
              { "name": "flushY", "type": "boolean" },
              { "name": "inline", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-tile-property",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            { "name": "caption", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            { "name": "icon", "value": { "type": "string" } }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [
              { "name": "caption", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "icon", "type": "string" }
            ],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-timer",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "timestamp",
              "value": { "type": "string", "default": "''" }
            }
          ],
          "slots": [
            { "name": "", "description": "The default slot." },
            { "name": "example", "description": "An example slot." }
          ],
          "events": [
            { "name": "zn-event-name", "description": "Emitted as an example." }
          ],
          "js": {
            "properties": [],
            "events": [
              {
                "name": "zn-event-name",
                "description": "Emitted as an example."
              }
            ]
          }
        },
        {
          "name": "zn-toggle",
          "description": "Toggles allow the user to switch an option on or off.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the toggle receives input.\n\n### **Slots:**\n - _default_ - The toggle's label.\n\n### **CSS Properties:**\n - **--zn-toggle-margin** - The margin around the toggle switch. Defaults to `8px 0`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper containing the toggle switch.\n- **control** - The toggle switch control (the circular button that slides).",
          "doc-url": "",
          "attributes": [
            {
              "name": "title",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "name",
              "value": { "type": "string", "default": "\"\"" }
            },
            { "name": "value", "value": { "type": "string" } },
            {
              "name": "fallback",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "size",
              "value": {
                "type": "'small' | 'medium' | 'large'",
                "default": "'medium'"
              }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "checked",
              "value": { "type": "boolean", "default": "false" }
            },
            { "name": "form", "value": { "type": "string", "default": "''" } },
            {
              "name": "required",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "help-text",
              "value": { "type": "string", "default": "\"\"" }
            },
            {
              "name": "trigger-submit",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "on-text",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "off-text",
              "value": { "type": "string", "default": "''" }
            },
            { "name": "label", "value": { "type": "string", "default": "''" } },
            {
              "name": "inline",
              "value": { "type": "boolean", "default": "false" }
            }
          ],
          "slots": [{ "name": "", "description": "The toggle's label." }],
          "events": [
            {
              "name": "zn-input",
              "description": "Emitted when the toggle receives input."
            }
          ],
          "js": {
            "properties": [
              { "name": "input", "type": "HTMLInputElement" },
              { "name": "hasFocus", "type": "boolean" },
              { "name": "title", "type": "string" },
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "fallbackValue", "type": "string" },
              { "name": "size", "type": "'small' | 'medium' | 'large'" },
              { "name": "disabled", "type": "boolean" },
              { "name": "checked", "type": "boolean" },
              { "name": "defaultChecked", "type": "boolean" },
              { "name": "form", "type": "string" },
              { "name": "required", "type": "boolean" },
              { "name": "helpText", "type": "string" },
              { "name": "triggerSubmit", "type": "boolean" },
              { "name": "onText", "type": "string" },
              { "name": "offText", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "inline", "type": "boolean" },
              { "name": "validity" },
              { "name": "validationMessage" }
            ],
            "events": [
              {
                "name": "zn-input",
                "description": "Emitted when the toggle receives input."
              }
            ]
          }
        },
        {
          "name": "zn-tooltip",
          "description": "The Tooltip component is used to display additional information when a user hovers over or clicks\non an element.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the tooltip is shown.\n- **zn-after-show** - Emitted after the tooltip is shown.\n- **zn-hide** - Emitted when the tooltip is hidden.\n- **zn-after-hide** - Emitted after the tooltip is hidden.\n\n### **Slots:**\n - _default_ - The content of the tooltip\n- **anchor** - The anchor the tooltip is attached to.",
          "doc-url": "",
          "attributes": [
            {
              "name": "content",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "placement",
              "value": {
                "type": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
                "default": "'top'"
              }
            },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "distance",
              "value": { "type": "number", "default": "4" }
            },
            {
              "name": "open",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "skidding",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "trigger",
              "value": { "type": "string", "default": "'hover focus'" }
            },
            {
              "name": "hoist",
              "value": { "type": "boolean", "default": "true" }
            }
          ],
          "slots": [
            { "name": "", "description": "The content of the tooltip" },
            {
              "name": "anchor",
              "description": "The anchor the tooltip is attached to."
            }
          ],
          "events": [
            {
              "name": "zn-show",
              "description": "Emitted when the tooltip is shown."
            },
            {
              "name": "zn-after-show",
              "description": "Emitted after the tooltip is shown."
            },
            {
              "name": "zn-hide",
              "description": "Emitted when the tooltip is hidden."
            },
            {
              "name": "zn-after-hide",
              "description": "Emitted after the tooltip is hidden."
            }
          ],
          "js": {
            "properties": [
              { "name": "defaultSlot", "type": "HTMLSlotElement" },
              { "name": "body", "type": "HTMLElement" },
              { "name": "popup", "type": "Popup" },
              { "name": "content", "type": "string" },
              {
                "name": "placement",
                "type": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n    'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
              },
              { "name": "disabled", "type": "boolean" },
              { "name": "distance", "type": "number" },
              { "name": "open", "type": "boolean" },
              { "name": "skidding", "type": "number" },
              { "name": "trigger", "type": "string" },
              { "name": "hoist", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-show",
                "description": "Emitted when the tooltip is shown."
              },
              {
                "name": "zn-after-show",
                "description": "Emitted after the tooltip is shown."
              },
              {
                "name": "zn-hide",
                "description": "Emitted when the tooltip is hidden."
              },
              {
                "name": "zn-after-hide",
                "description": "Emitted after the tooltip is hidden."
              }
            ]
          }
        },
        {
          "name": "zn-translation-group",
          "description": "A panel-styled container that provides a shared language toggle for multiple zn-translations children.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - Default slot for `<zn-translations>` elements.\n- **actions** - Actions displayed in the panel header alongside language buttons.\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
          "doc-url": "",
          "attributes": [
            {
              "name": "label",
              "description": "The group label displayed in the panel header.",
              "value": { "type": "string", "default": "''" }
            },
            {
              "name": "languages",
              "description": "The available languages for the group.",
              "value": {
                "type": "Record<string, string>",
                "default": "{ 'en': 'EN' }"
              }
            },
            { "name": "basis-px", "value": { "type": "number" } },
            { "name": "caption", "value": { "type": "string" } },
            { "name": "icon", "value": { "type": "string" } },
            { "name": "description", "value": { "type": "string" } },
            { "name": "tabbed", "value": { "type": "boolean" } },
            { "name": "header-underline", "value": { "type": "boolean" } },
            { "name": "cosmic", "value": { "type": "boolean" } },
            { "name": "flush", "value": { "type": "boolean" } },
            { "name": "flush-x", "value": { "type": "boolean" } },
            { "name": "flush-y", "value": { "type": "boolean" } },
            { "name": "flush-footer", "value": { "type": "boolean" } },
            { "name": "transparent", "value": { "type": "boolean" } },
            { "name": "shadow", "value": { "type": "boolean" } }
          ],
          "slots": [
            {
              "name": "",
              "description": "Default slot for `<zn-translations>` elements."
            },
            {
              "name": "actions",
              "description": "Actions displayed in the panel header alongside language buttons."
            },
            {
              "name": "footer",
              "description": "Content displayed in the panel footer."
            }
          ],
          "events": [
            {
              "name": "zn-language-change",
              "description": "Emitted when the active language changes. Detail: `{ language: string }`."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "label",
                "description": "The group label displayed in the panel header.",
                "type": "string"
              },
              {
                "name": "languages",
                "description": "The available languages for the group.",
                "type": "Record<string, string>"
              },
              { "name": "basis", "type": "number" },
              { "name": "caption", "type": "string" },
              { "name": "icon", "type": "string" },
              { "name": "description", "type": "string" },
              { "name": "tabbed", "type": "boolean" },
              { "name": "underlineHeader", "type": "boolean" },
              { "name": "cosmic", "type": "boolean" },
              { "name": "flush", "type": "boolean" },
              { "name": "flushX", "type": "boolean" },
              { "name": "flushY", "type": "boolean" },
              { "name": "flushFooter", "type": "boolean" },
              { "name": "transparent", "type": "boolean" },
              { "name": "shadow", "type": "boolean" }
            ],
            "events": [
              {
                "name": "zn-language-change",
                "description": "Emitted when the active language changes. Detail: `{ language: string }`."
              }
            ]
          }
        },
        {
          "name": "zn-translations",
          "description": "\n---\n\n\n### **Methods:**\n - **setActiveLanguage(language: _string_)** - Sets the active language externally. Used by zn-translation-group.\n- **getActiveLanguage(): _string_** - Returns the currently active language.\n- **addLanguageKey(languageCode: _string_)** - Adds a language key to this component's values if not already present. Used by zn-translation-group.\n- **getValueLanguages(): _string[]_** - Returns all language codes that have values.",
          "doc-url": "",
          "attributes": [
            { "name": "name", "value": { "type": "string", "default": "''" } },
            {
              "name": "value",
              "value": { "type": "string", "default": "'{\"en\":\"\"}'" }
            },
            { "name": "label", "value": { "type": "string", "default": "''" } },
            {
              "name": "disabled",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "required",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "flush",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "input-type",
              "value": {
                "type": "'select' | 'text' | 'number' | 'textarea'",
                "default": "'text'"
              }
            },
            {
              "name": "grouped",
              "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "languages",
              "value": {
                "type": "Record<string, string>",
                "default": "{ 'en': 'EN' }"
              }
            },
            {
              "name": "values",
              "value": { "type": "Record<string, string>", "default": "{}" }
            }
          ],
          "events": [],
          "js": {
            "properties": [
              { "name": "name", "type": "string" },
              { "name": "value", "type": "string" },
              { "name": "label", "type": "string" },
              { "name": "disabled", "type": "boolean" },
              { "name": "required", "type": "boolean" },
              { "name": "flush", "type": "boolean" },
              {
                "name": "inputType",
                "type": "'select' | 'text' | 'number' | 'textarea'"
              },
              {
                "name": "grouped",
                "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
                "type": "boolean"
              },
              { "name": "languages", "type": "Record<string, string>" },
              { "name": "values", "type": "Record<string, string>" },
              { "name": "validity", "type": "ValidityState" },
              { "name": "validationMessage" }
            ],
            "events": []
          }
        },
        {
          "name": "zn-vertical-stepper",
          "description": "Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.\n---\n\n\n### **Slots:**\n - **icon** - Optional slot for adding an icon or indicator before the step content.\n\n### **CSS Parts:**\n - **vs** - The main container for the vertical stepper.\n- **vs__left** - The left section containing the icon and connecting line.\n- **vs__icon** - The icon container.\n- **vs__line** - The vertical connecting line between steps.\n- **vs__right** - The right section containing caption and description text.\n- **vs__caption** - The caption/title text element.\n- **vs__description** - The description text element.",
          "doc-url": "",
          "attributes": [
            {
              "name": "last",
              "description": "When true, removes the connecting line below this step (use for the final step in a sequence).",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "first",
              "description": "When true, indicates this is the first step in the sequence (affects visual styling).",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "active",
              "description": "When true, highlights this step as the current active step in the process.",
              "value": { "type": "boolean", "default": "false" }
            },
            {
              "name": "description",
              "description": "A descriptive text explaining what happens in this step or its current status.",
              "value": { "type": "string" }
            },
            {
              "name": "caption",
              "description": "The main label/title for this step.",
              "value": { "type": "string" }
            }
          ],
          "slots": [
            {
              "name": "icon",
              "description": "Optional slot for adding an icon or indicator before the step content."
            }
          ],
          "events": [],
          "js": {
            "properties": [
              {
                "name": "last",
                "description": "When true, removes the connecting line below this step (use for the final step in a sequence).",
                "type": "boolean"
              },
              {
                "name": "first",
                "description": "When true, indicates this is the first step in the sequence (affects visual styling).",
                "type": "boolean"
              },
              {
                "name": "active",
                "description": "When true, highlights this step as the current active step in the process.",
                "type": "boolean"
              },
              {
                "name": "description",
                "description": "A descriptive text explaining what happens in this step or its current status.",
                "type": "string"
              },
              {
                "name": "caption",
                "description": "The main label/title for this step.",
                "type": "string"
              }
            ],
            "events": []
          }
        },
        {
          "name": "zn-well",
          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
          "doc-url": "",
          "attributes": [
            { "name": "icon", "value": { "type": "string", "default": "''" } },
            { "name": "inline", "value": { "type": "boolean" } }
          ],
          "slots": [{ "name": "", "description": "The default slot." }],
          "events": [],
          "js": {
            "properties": [
              { "name": "icon", "type": "string" },
              { "name": "inline", "type": "boolean" }
            ],
            "events": []
          }
        }
      ]
    }
  }
}