{
  "timestamp": "2022-08-09T16:38:41",
  "compiler": {
    "name": "@stencil/core",
    "version": "2.17.3",
    "typescriptVersion": "4.5.4"
  },
  "components": [
    {
      "filePath": "./src/components/n-action/action.tsx",
      "encapsulation": "none",
      "tag": "n-action",
      "readme": "# N-ACTION\n\nThis element holds am action event and its data to be submitted through [Actions](/actions) bus. The parent tag defines how and when the child actions are submitted through [Actions](/actions). \n\n> ℹ️ This element does not activate these actions automatically. They need to be activated through script, or by wrapping them in an [`n-action-activator`](/components/n-action-activator) tag.\n\n\n## Element\n\n```html\n<n-action \n  topic='<topic>'\n  command='<command>'\n  data-(key)='value'>\n</n-action>\n```\n",
      "docs": "This element just holds data to express the actionEvent to fire. This element\nshould always be the child of an n-action-activator.",
      "docsTags": [
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": "\nFor most action-argument data, it is easiest to specify them as key-value pairs using the `data-*` attributes within the `n-action` tag. The name of the argument should be prefixed with `data-`. A\n\n```html\n<n-action topic='<topic>'\n  command='<command>'\n  data-(key)='value'>\n</n-action>\n```\n\n> ℹ️ Note: If a listener declares an argument using 'camelCase', it should be converted to 'kebab-case' in HTML, (words separated by dashes, all lowercase). It will be converted to 'camelCase' automatically when activated.\n\n\n#### Real example\n\n```html\n<n-action topic='navigation'\n  command='go-to'\n  data-path='/some/path'>\n</n-action>\n```\n",
        "conditional": "To add a condition to your actions, add a when attribute to the action element with your predicate expression.\n\n```html\n<n-action topic='<topic>'\n  command='<command>'\n  when='<expression>'\n  data-(key)='value'>\n</n-action>\n...\n<n-data></n-data>\n```\n\n> ℹ️ Note: You must enable data services, by adding an `n-data` element to the page.\n\n\n#### Real example\n\n```html\n<n-action topic='navigation'\n  command='go-to'\n  when='{{storage:auto-navigate}}'\n  data-path='/some/path'>\n</n-action>\n```\n",
        "input data": "\nFor most data, it is easy to specify key-value pairs using the `data-*` attributes within the `n-action` tag.\n\n```html\n<n-action topic='<topic>'\n  command='<command>'>\n  <input type='hidden'\n    name='arg1'\n    value='Hello World'>\n</n-action>\n```",
        "script data": "\nFor more complex data shapes, you can define the data parameters as JSON in a child script tag.\n\n```html\n<n-action topic='<topic>' command='<command>'>\n  <script type='application/json'>\n    {\n      'arg1': 'Hello world!'\n    }\n  </script>\n</n-action>\n```",
        "tokens": "\nIf the `n-data` extension is enabled, you can use token-expressions as the value for actions:\n\n```html\n<n-action \n  topic='<topic>'\n  command='<command>'\n  data-(key)='{{provider:key}}'>\n</n-action>\n```\n"
      },
      "props": [
        {
          "name": "command",
          "type": "string",
          "mutable": false,
          "attr": "command",
          "reflectToAttr": false,
          "docs": "The command to execute.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "topic",
          "type": "string",
          "mutable": false,
          "attr": "topic",
          "reflectToAttr": false,
          "docs": "This is the topic this action-command is targeting.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A predicate to evaluate prior to sending the action.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any> | null>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<any> | null>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance. Used by the n-action-activator element.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-action-activator/action-activator.tsx",
      "encapsulation": "none",
      "tag": "n-action-activator",
      "readme": "# N-ACTION-ACTIVATOR\n\nThis element defines how and when a group of Actions, defined with the [`n-action`](/components/n-action) element, are submitted through the [actions system](/actions).\n\nThis element should only ever contain child [`n-action`](/components/n-action) tags. The attributes defines how and when the child-actions are submitted through the [actions system](/actions).\n\n```html\n<n-action-activator\n  activate='<activation-strategy>'\n  ...\n  supporting\n  attributes\n  ...\n>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n</n-action-activator>\n```\n\n## Activation Strategies\n\nThe **activate** attribute defines the strategy for activating all child actions in the order they appear.\n\n### `on-element-event`\n\nThe default strategy is `on-element-event` which can be used anywhere. The child-actions will fire when the target element raises the target event.\n\n### `on-enter`\n\nActivation occurs when the parent route is activated and the contents are displayed.\n\n### `on-exit`\n\nActivation occurs when the parent route is de-activated and the next route is displayed.\n\n### `on-render`\n\nActivation occurs when the parent element is displayed.\n\n### `at-time`\n\nActivation occurs when the parent route has been activated for the given time within the **time** attribute.\n\n### `at-time-end`\n\nActivation occurs when the presentation ends.\n",
      "docs": "This element defines how or when a group of actions are\nactivated. The actions activated must be included between\nthis elements tags.",
      "docsTags": [
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "on-element-event": "### On Element Event\n\nThe default activation is OnElementEvent and the default event is click. Also, if no target-element is supplied, it looks for the first element that isn't an action or script and attaches to its event. If no target-event is defined, it assumes 'click'\n\n```html\n<n-action-activator>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n  <button>Click Me</button>\n</n-action-activator>\n```\n\n> ℹ️ Note: _PRO-TIP:_ This element appends any child input element's values to the actions it fires.",
        "on-enter": "### On Enter\n\n```html\n<n-view-prompt ...>\n  <n-action-activator activate='on-enter'>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n  </n-action-activator>\n</n-view-prompt>\n```\n\n> ℹ️ Note: The `on-enter` activation-strategy only works when this element is a child of  [`n-view`](/components/n-view) or [`n-view-prompt`](/components/n-view-prompt).\n",
        "on-exit": "### On Exit\n\n\n```html\n<n-view-prompt ...>\n  <n-action-activator activate='on-exit'>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n  </n-action-activator>\n</n-view-prompt>\n```\n\n> ℹ️ Note: The `on-exit` activation-strategy only works when this element is a child of  [`n-view`](/components/n-view) or [`n-view-prompt`](/components/n-view-prompt).\n",
        "on-render": "### On Render\n\nThis activation-strategy fires as soon as the activator component renders. It can be pulled in through remote templates or added to a page for analytics.\n\n```html\n<n-action-activator activate='on-render'>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n  <n-action ...></n-action>\n</n-action-activator>\n```\n\n> ℹ️ Note: The `on-exit` activation-strategy only works when this element is a child of  [`n-view`](/components/n-view) or [`n-view-prompt`](/components/n-view-prompt).\n",
        "presentation-at-time": "### At Time\n\nActivation occurs when the presentation has been playing for the given time within the **time** attribute.\n\n```html\n<n-presentation>\n  <n-presentation-timer duration=\"3\">\n  </n-presentation-timer>\n  <n-action-activator \n    activate='AtTime' \n    time='3'>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n  </n-action-activator>\n</n-presentation>\n```\n\n> ℹ️ Note: The `at-time` activation-strategy only works when this element is a child of  [`n-presentation`](/components/n-presentation).\n",
        "presentation-at-time-end": "#### At Time End\n> ℹ️ Note: The `at-time=end` activation-strategy only works when this element is a child of  [`n-presentation`](/components/n-presentation).\n\n```html\n\n<n-presentation>\n  <n-video ...>\n  </n-video>\n  <n-action-activator activate='AtTime' \n    time='3'>\n    <n-action ...></n-action>\n    <n-action ...></n-action>\n  </n-action-activator>\n</n-presentation>\n\n> ℹ️ Note: For more information on presentation and how they work, see  [`n-presentation`](/components/n-presentation)"
      },
      "props": [
        {
          "name": "activate",
          "type": "\"at-time\" | \"at-time-end\" | \"on-element-event\" | \"on-enter\" | \"on-exit\" | \"on-render\"",
          "mutable": false,
          "attr": "activate",
          "reflectToAttr": false,
          "docs": "The activation strategy to use for the contained actions.",
          "docsTags": [],
          "default": "'on-element-event'",
          "values": [
            {
              "value": "at-time",
              "type": "string"
            },
            {
              "value": "at-time-end",
              "type": "string"
            },
            {
              "value": "on-element-event",
              "type": "string"
            },
            {
              "value": "on-enter",
              "type": "string"
            },
            {
              "value": "on-exit",
              "type": "string"
            },
            {
              "value": "on-render",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debug statements for load, update and render events.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "once",
          "type": "boolean",
          "mutable": false,
          "attr": "once",
          "reflectToAttr": false,
          "docs": "Limit the activation to ONCE. This could be helpful if an action\nhas side-effects if it is run multiple times.\n\nNote: the activation\nstate is stored in memory and does not persist across refreshes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "targetElement",
          "type": "string | undefined",
          "mutable": false,
          "attr": "target-element",
          "reflectToAttr": false,
          "docs": "The element or elements to watch for events when using the OnElementEvent\nactivation strategy. This element uses the HTML Element querySelectorAll\nfunction to find the element/s based on the query in this attribute.\n\nIf left blank, this element looks for child elements matching:\n'a,button,input[type=button]'\n\nFor use with activate=\"on-element-event\" and \"at-time\"",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "targetEvent",
          "type": "string",
          "mutable": false,
          "attr": "target-event",
          "reflectToAttr": false,
          "docs": "This is the name of the event/s to listen to on the target element\nseparated by comma.",
          "docsTags": [],
          "default": "'click,keydown'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "time",
          "type": "number | undefined",
          "mutable": false,
          "attr": "time",
          "reflectToAttr": false,
          "docs": "The time, in seconds at which the contained actions should be submitted.\n\nFor use with activate=\"at-time\" Only!",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "activateActions",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "activateActions(once?: boolean) => Promise<void>",
          "parameters": [],
          "docs": "Manually activate all actions within this activator.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-app/app.tsx",
      "encapsulation": "none",
      "tag": "n-app",
      "readme": "# N-APP\n\nThis element enables application installation features for progressive web applications.\n\nIt also handles event/action delegation between the HTML DOM and NENT bus.\n\nAdditionally, this element is required to add external elements that need to be activated using actions.\n\n## Element Description\n\n```html\n<n-app\n  name=\"\"\n  description=\"\" \n  keywords=\"\"\n  short-name=\"\"\n  icon-src=\"\"\n  theme-color=\"\"\n  background-color=\"\"\n  \n  disable-manifest\n  disable-meta-tags\n  disable-actions\n  debug>\n</n-app>\n```\n\n",
      "docs": "This component enables app services. These are console logging,\ntheming and event-delegation. As well as a plugin system to\nmanage a UI kit to add components like Modals, Drawers,\nmenus, etc.",
      "docsTags": [
        {
          "name": "system",
          "text": "app"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "custom"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic": "```html\n<n-app id=\"app\"\n    app-title=\"NENT\"\n    app-description=\"Functional elements to super-charge your HTML\"\n    app-keywords=\"web-components, low-code, no-framework, jam-stack, nent\">\n    ...\n</n-app\n```"
      },
      "props": [
        {
          "name": "appDescription",
          "type": "string | undefined",
          "mutable": false,
          "attr": "app-description",
          "reflectToAttr": false,
          "docs": "This is the application default page description.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "appKeywords",
          "type": "string | undefined",
          "mutable": false,
          "attr": "app-keywords",
          "reflectToAttr": false,
          "docs": "This is the application default page keywords.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "appTitle",
          "type": "string | undefined",
          "mutable": false,
          "attr": "app-title",
          "reflectToAttr": false,
          "docs": "This is the application / site title.\nIf the views have titles,\nthis is added as a suffix.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "nent:actions",
          "detail": "any",
          "bubbles": false,
          "cancelable": true,
          "composed": true,
          "docs": "These events are command-requests for action handlers to perform tasks.\nAny outside handlers should cancel the event.",
          "docsTags": []
        },
        {
          "event": "nent:events",
          "detail": "any",
          "bubbles": true,
          "cancelable": false,
          "composed": true,
          "docs": "Listen for events that occurred within the nent event system.",
          "docsTags": []
        }
      ],
      "listeners": [
        {
          "event": "nent:actions",
          "target": "body",
          "capture": false,
          "passive": true
        }
      ],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-app-analytics/app-analytics.tsx",
      "encapsulation": "none",
      "tag": "n-app-analytics",
      "readme": "# N-APP-ANALYTICS\n\nThe [`n-app-analytics`](/components/n-app-analytics) element delegates internal analytics commands to DOM events\nallowing developers to connect events to any analytics provider.\n\n## Actions\n\nThis element can respond to actions. See the  [actions](/components/n-app-analytics/actions) documentation for more information.\n\n",
      "docs": "This element serves as a proxy to delegate event-based\nfunctions to be consumed by various analytics snippets.",
      "docsTags": [
        {
          "name": "system",
          "text": "app"
        },
        {
          "name": "extension",
          "text": "actions"
        }
      ],
      "usage": {
        "GTM": "\n\n```html\n<head>\n  <!-- Global site tag (gtag.js) - Google Analytics -->\n  <script\n    async\n    src='https://www.googletagmanager.com/gtag/js?id=G-ZZZ'\n  ></script>\n  <script>\n    window.dataLayer = window.dataLayer || []\n    function gtag() {\n      dataLayer.push(arguments)\n    }\n    gtag('js', new Date())\n    gtag('config', 'G-ZZZZ')\n  </script>\n</head>\n<body>\n  ...\n  <n-app-analytics id='analytics'>\n    <script>\n      analytics.addEventListener( 'custom-event', ( e ) => {\n        console.log(`event: ${JSON.stringify(e.detail)}`)\n        Object.getOwnPropertyNames(e.detail).forEach(n => {\n          gtag( n, e.detail[n] )\n          console.debug(`gtag('${n}', '${e.detail[n]})'`)\n        })\n      } )\n      analytics.addEventListener('page-view', e => {\n        console.log(`event: ${JSON.stringify(e.detail)}`)\n        gtag('page_view', e.detail.pathname)\n      })\n      analytics.addEventListener('view-time', e => {\n        console.log(`event: ${JSON.stringify(e.detail)}`)\n        gtag(e.detail.key, e.detail.value)\n      })\n    </script>\n  </n-app-analytics>\n</body>\n```",
        "basic": "\nUsing the [`n-app-analytics`](/components/n-app-analytics) element is simple, but does require some scripting."
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "custom-event",
          "detail": "any",
          "bubbles": true,
          "cancelable": false,
          "composed": false,
          "docs": "Raised analytics events.",
          "docsTags": []
        },
        {
          "event": "page-view",
          "detail": "LocationSegments",
          "bubbles": true,
          "cancelable": false,
          "composed": false,
          "docs": "Page views.",
          "docsTags": []
        },
        {
          "event": "view-time",
          "detail": "ViewTime",
          "bubbles": true,
          "cancelable": false,
          "composed": false,
          "docs": "View percentage views.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-app-share/app-share.tsx",
      "encapsulation": "shadow",
      "tag": "n-app-share",
      "readme": "# N-APP-SHARE\n\nThe `<n-app-share>` element description\n\n",
      "docs": "This element leverages the browser's web-share\nAPI to give the application a native-app feel.",
      "docsTags": [
        {
          "name": "system",
          "text": "app"
        }
      ],
      "usage": {
        "basic": "Using the `<n-app-share>` element.\n\n```html\n<n-app-share \n  headline=\"\"\n  url=\"\"\n  text=\"\">\n</n-app-share>\n```\n"
      },
      "props": [
        {
          "name": "headline",
          "type": "string | undefined",
          "mutable": false,
          "attr": "headline",
          "reflectToAttr": false,
          "docs": "Headline for the share",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "text",
          "type": "string | undefined",
          "mutable": false,
          "attr": "text",
          "reflectToAttr": false,
          "docs": "The textual body of web share",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "url",
          "type": "string | undefined",
          "mutable": true,
          "attr": "url",
          "reflectToAttr": false,
          "docs": "The URL we are sharing",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "share",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "share(data?: { title?: string | undefined; text?: string | undefined; url?: string | undefined; } | null | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Manual share method for more complex scenarios",
          "docsTags": [
            {
              "name": "param",
              "text": "data"
            }
          ]
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-app-theme/app-theme.tsx",
      "encapsulation": "none",
      "tag": "n-app-theme",
      "readme": "# N-APP-THEME\n\nThe `<n-app-theme>` element checks for the preferred light/dark theme preference of the\nuser and sets the interface state: theme, accordingly.\n\n",
      "docs": "This element checks for the preferred light/dark theme preference of the\nuser and sets the ui state: theme, accordingly.",
      "docsTags": [
        {
          "name": "system",
          "text": "app"
        }
      ],
      "usage": {
        "basic": "\nAdd this tag somewhere close to the top of the application to auto-adjust the theme class\nbased on the user's preferences.\n\nUse it in conjunction with the [`n-app-theme-switch`](/components/n-app-theme-switch) element\nto give users control of which theme should be applied.\n\n```html\n<n-app>\n  <n-app-theme>    \n  </n-app-theme>\n</n-app>\n```",
        "custom-class": "\nTo set a custom class name:\n\n```html\n<n-app>\n  <n-app-theme \n    dark-class='midnight'>\n  </n-app-theme>\n</n-app>\n```"
      },
      "props": [
        {
          "name": "darkClass",
          "type": "string",
          "mutable": false,
          "attr": "dark-class",
          "reflectToAttr": false,
          "docs": "Change the class name that is added to the\ntarget element when the theme is determined to\nbe dark.",
          "docsTags": [],
          "default": "'dark'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "display",
          "type": "boolean",
          "mutable": false,
          "attr": "display",
          "reflectToAttr": false,
          "docs": "Display the user's system preference.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "switch",
          "type": "boolean",
          "mutable": false,
          "attr": "switch",
          "reflectToAttr": false,
          "docs": "This element displays the current theme,\nunless in switch-mode, it will show the opposite.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "targetElement",
          "type": "string",
          "mutable": false,
          "attr": "target-element",
          "reflectToAttr": false,
          "docs": "Change the element that is decorated with\nthe dark-mode class",
          "docsTags": [],
          "default": "'body'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-app-theme-switch/app-theme-switch.tsx",
      "encapsulation": "none",
      "tag": "n-app-theme-switch",
      "readme": "# N-APP-THEME-SWITCH\n\nThe `<n-app-theme-switch>` element displays a checkbox to control the dark-theme setting applied to the interface.\n\nDefault: user-preference\n",
      "docs": "This element displays a checkbox to control the\ndark-theme setting applied to the ui.\n\nDefault: user-preference",
      "docsTags": [
        {
          "name": "system",
          "text": "app"
        }
      ],
      "usage": {
        "basic": "Add the `<n-app-theme-switch>` element to any page to allow the user to adjust the setting. You can style it using standard CSS and if necessary, add CSS styles directly to the input element using the **classes** attribute."
      },
      "props": [
        {
          "name": "inputClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-class",
          "reflectToAttr": false,
          "docs": "The class to add to the inner input.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-id",
          "reflectToAttr": false,
          "docs": "The inner input ID",
          "docsTags": [],
          "default": "'dark-mode'",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-audio/audio.tsx",
      "encapsulation": "shadow",
      "tag": "n-audio",
      "readme": "# N-AUDIO\n\nThis element is responsible for playing audio requested via the [action](/actions) bus. Internally it holds two players, one for music and another for sounds.\n\nThe audio-tracks are declaratively defined in HTML to respond to user interactions. Unlike a typical playlist, the audio items are configured with behavior rules that help orchestrate overlapping sound and music sound.\n\nWhile it can be placed anywhere, only ONE player is allowed within an HTML document. Loading a second element will have no effect.\n\nOnce in-place, the [`n-audio`](/components/n-audio) element listens on the **audio** topic for commands.\n\n> ℹ️ Note: This element subscribes to route-change notifications - as some audio clips are meant to end when the route changes.\n\n## Audio Actions\n\nTo operate the player, it is easiest to just use the `<n-audio-load-*>` elements to pre-load the audio. Then declare the actions using the [`n-action-activator`](/components/n-action-activator) element.\n\n```html\n<n-view-prompt>\n  <n-audio-action-sound-load \n    track-id='<unique-id>' \n    src='<url>'>\n  </n-audio-action-sound-load>\n  <n-action-activator ...>\n    <n-audio-action-sound\n      command='<command>'\n      track-id='<id>'\n      value='<value>'\n    ></n-audio-action-sound>\n  </n-action-activator>\n</n-view-prompt>\n```\n\n## Display\n\nThis player can be configured to display or remain hidden. When displayed, it shows a single icon when a file is loaded and a different icon when it is playing. Clicking it should toggle pause for both of the players simultaneously.\n\n\n```html\n<n-audio display> </n-audio>\n```\n\n### Looping\n\nOnly the music player will support looping. Default is true. Looping audio loops until its discard event occurs.\n\nIf audio is set to loop with no deactivation, any new configuration will end it. For instance, if new audio is configured to activate in a queued fashion, the looping audio should stop, allowing the queued audio to play when it ends.\n\n### Discard Strategy\n\nEach audio track-request defines when it should be stopped and removed from the queue. This allows for music to plays between routes. By default, a route-change will empty the queue of any unplayed audio.\n\n- **route**: When the route changes (default for unmarked)\n- **next**: Play/queue until route or another audio is queued.\n- **none**: Play until a new track is played (default for music)\n\n### Volume Easing\n\nHard discards or play ease out the audio with a .5 second fade-out before playing the next clip.\n",
      "docs": "Use this element only once per page to enable audio features.\nIt will add a CDN reference to Howler.js:\n<https://cdn.jsdelivr.net/npm/howler@2.2.3/dist/howler.core.min.js>",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "provider"
        }
      ],
      "usage": {
        "basic": "## Display\n\nThis player can be configured to display or remain hidden. When displayed, it shows a single icon when a file is loaded and a different icon when it is playing. Clicking it should toggle pause for both of the players simultaneously.\n\n\n```html\n<n-audio display> </n-audio>\n```"
      },
      "props": [
        {
          "name": "actions",
          "type": "AudioActionListener | undefined",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "A reference to the action listener for testing.",
          "docsTags": [],
          "values": [
            {
              "type": "AudioActionListener"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "dataProvider",
          "type": "boolean",
          "mutable": false,
          "attr": "data-provider",
          "reflectToAttr": false,
          "docs": "Experimental support for providing audio-data in the\ndata-provider system.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Use debug for verbose logging. Useful for figuring\nthings out.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "display",
          "type": "boolean",
          "mutable": false,
          "attr": "display",
          "reflectToAttr": false,
          "docs": "The display mode enabled shows player state and stats.\nNo track information or duration is to be displayed.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "howlerVersion",
          "type": "string",
          "mutable": false,
          "attr": "howler-version",
          "reflectToAttr": false,
          "docs": "The Howler.js Script Reference",
          "docsTags": [],
          "default": "'2.2.3'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "n-content-reference"
      ],
      "dependencyGraph": {
        "n-audio": [
          "n-content-reference"
        ]
      }
    },
    {
      "filePath": "./src/components/n-audio-action-music/audio-action-music.tsx",
      "encapsulation": "shadow",
      "tag": "n-audio-action-music",
      "readme": "# N-AUDIO-ACTION-MUSIC\n\nThis element represents an action to be fired. This specialized action encapsulates the required parameters needed for audio-based actions, for music.\n\n> ℹ️ Note: See the [audio](/audio) systems documentation for more information.\n",
      "docs": "This element represents an action to be fired. This\nspecialized action encapsulates required parameters\nneeded for audio-based actions, for music.",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        },
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "command",
          "type": "\"mute\" | \"pause\" | \"resume\" | \"seek\" | \"start\" | \"volume\"",
          "mutable": false,
          "attr": "command",
          "reflectToAttr": false,
          "docs": "The command to execute.",
          "docsTags": [],
          "values": [
            {
              "value": "mute",
              "type": "string"
            },
            {
              "value": "pause",
              "type": "string"
            },
            {
              "value": "resume",
              "type": "string"
            },
            {
              "value": "seek",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            },
            {
              "value": "volume",
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "topic",
          "type": "\"audio\"",
          "mutable": false,
          "attr": "topic",
          "reflectToAttr": false,
          "docs": "Readonly topic",
          "docsTags": [],
          "default": "AUDIO_TOPIC",
          "values": [
            {
              "value": "audio",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "trackId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "track-id",
          "reflectToAttr": false,
          "docs": "The track to target.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "value",
          "type": "boolean | number | string | undefined",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value payload for the command.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "number"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A predicate to evaluate prior to sending the action.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any> | null>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<any> | null>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance. Used by the n-action-activator element.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-audio-action-music-load/audio-action-music-load.tsx",
      "encapsulation": "shadow",
      "tag": "n-audio-action-music-load",
      "readme": "# N-AUDIO-ACTION-MUSIC-LOAD\n\nThis component declares audio playback. The [`n-audio-action-music-load`](/components/n-audio-action-music-load) element represents audio files and play behaviors. They are sent to the audio player to pre-load or play when the route is active. The player manages them according to their settings.\n\n> ℹ️ Note: See the [audio](/audio) systems documentation for more information.\n\n## Usage\n\n```html\n<n-view-prompt>\n  <n-audio-action-music-load\n    mode='play|load'\n    track-id='<unique-id>'\n    src='<url>'\n    discard='route|video|next|none'\n    loop\n    track\n  ></n-audio-action-music-load>\n</n-view-prompt>\n```\n\n### Simple\n\n```html\n<n-view-prompt>\n  <n-audio-action-music-load \n    track-id='<unique-id>' \n    src='<url>'>\n  </n-audio-action-music-load>\n</n-view-prompt>\n```\n\n```html\n<n-view-prompt>\n  <n-audio-action-music-load\n    mode='queue' \n    id='<unique-id>' \n    src='<url>' \n    discard='none' \n    loop>\n  </n-audio-action-music-load>\n</n-view-prompt>\n```\n\n#### Mode\n\n- **queue**: (default) plays after the previous audio is complete or when it's requested.\n- **play**: stop any playing audio and play now, buffering be-damned.\n- **wait**: wait for action before playing, any currently playing audio continues.\n\n#### Discard\n\n- **video**: when any video plays (default for sound)\n- **state**: state changes\n- **event**: wait for a stop event (or any other activation)\n- **none**: loop until stopped or updated by new state (default for music)\n\n#### Track\n\nIf audio has replay set to true, re-entry to the originating state will re-activate the audio if the previous audio has been deactivated. The default is false.\n",
      "docs": "This element declares audio used within this \\<n-view-prompt\\> route.\nThe \\<n-audio-action-sound-load\\> instructs the player to load audio files\nwhile defining play behaviors.\n\nThe audio player will pre-load or play when the route is active.\nThe player manages them according to their settings.",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        },
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "discard",
          "type": "\"next\" | \"none\" | \"route\"",
          "mutable": false,
          "attr": "discard",
          "reflectToAttr": false,
          "docs": "The discard strategy the player should use for this file.",
          "docsTags": [],
          "default": "'route'",
          "values": [
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "route",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "loop",
          "type": "boolean",
          "mutable": false,
          "attr": "loop",
          "reflectToAttr": false,
          "docs": "Set this to true to have the audio file loop.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"load\" | \"play\" | \"queue\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "This is the loading strategy that determines\nwhat it should do after the file is retrieved.",
          "docsTags": [],
          "default": "'queue'",
          "values": [
            {
              "value": "load",
              "type": "string"
            },
            {
              "value": "play",
              "type": "string"
            },
            {
              "value": "queue",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "The path to the audio-file.",
          "docsTags": [
            {
              "name": "required"
            }
          ],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "trackId",
          "type": "string",
          "mutable": false,
          "attr": "track-id",
          "reflectToAttr": false,
          "docs": "The identifier for this music track",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any>>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<AudioInfo | AudioRequest | any>>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-audio-action-sound/audio-action-sound.tsx",
      "encapsulation": "shadow",
      "tag": "n-audio-action-sound",
      "readme": "# N-AUDIO-ACTION-SOUND\n\nThis element represents an action to be fired. This specialized action encapsulates the required parameters needed for audio-based actions, for sound.\n\n> ℹ️ Note: See the [audio](/audio) systems documentation for more information.\n",
      "docs": "This element represents an action to be fired. This\nspecialized action encapsulates required parameters\nneeded for audio-based actions, for sound.",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        },
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "command",
          "type": "\"mute\" | \"pause\" | \"resume\" | \"seek\" | \"start\" | \"volume\"",
          "mutable": false,
          "attr": "command",
          "reflectToAttr": false,
          "docs": "The command to execute.",
          "docsTags": [],
          "values": [
            {
              "value": "mute",
              "type": "string"
            },
            {
              "value": "pause",
              "type": "string"
            },
            {
              "value": "resume",
              "type": "string"
            },
            {
              "value": "seek",
              "type": "string"
            },
            {
              "value": "start",
              "type": "string"
            },
            {
              "value": "volume",
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "topic",
          "type": "\"audio\"",
          "mutable": false,
          "attr": "topic",
          "reflectToAttr": false,
          "docs": "Readonly topic",
          "docsTags": [],
          "default": "'audio'",
          "values": [
            {
              "value": "audio",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "trackId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "track-id",
          "reflectToAttr": false,
          "docs": "The track to target.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "value",
          "type": "boolean | number | string | undefined",
          "mutable": false,
          "attr": "value",
          "reflectToAttr": false,
          "docs": "The value payload for the command.",
          "docsTags": [],
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "number"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A predicate to evaluate prior to sending the action.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any> | null>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<any> | null>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance. Used by the n-action-activator element.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-audio-action-sound-load/audio-action-sound-load.tsx",
      "encapsulation": "shadow",
      "tag": "n-audio-action-sound-load",
      "readme": "# N-AUDIO-ACTION-SOUND-LOAD\n\nThe [`n-audio-action-sound-load`](/components/n-audio-action-sound-load) element represents audio files and play behaviors. They are all sent to the global-audio player to pre-load or play when the route is active. The player manages them according to their settings.\n\n> ℹ️ Note: See the [audio](/audio) systems documentation for more information.\n\n## Usage\n\n```html\n<n-view-prompt>\n  <n-audio-action-sound-load \n    mode='queue|play|load' \n    track-id='<unique-id>' \n    src='<url>' \n    discard='route|next|none' \n    track>\n  </n-audio-action-sound-load>\n</n-view-prompt>\n```\n\n### Simple\n\n```html\n<n-view-prompt>\n  <n-audio-action-sound-load \n    track-id='<unique-id>' \n    src='<url>'>\n  </n-audio-action-sound-load>\n</n-view-prompt>\n```\n\n## Timed\n\nFor timed audio, the audio is sent upfront for pre-loading. Then at the given time, a separate [`n-audio-action-sound`](/components/n-audio-action-sound) event is dispatched to play it at a given time. This way, the audio is likely to play on time without any buffering.\n\nThe following demonstrates how to load a track, and wait 10 seconds until it plays. It's important to remember this time can be paused by the user, so it could be any amount of time if a video is playing.\n\n```html\n<n-view-prompt>\n  <n-audio-action-sound-load \n    track-id='audio1' \n    src='<url>'>\n  </n-audio-action-sound-load>\n  <n-action-activator \n    activate='AtTime' \n    time='10'>\n    <n-audio-action-sound \n      command='start' \n      track-id='audio1'>\n    </n-audio-action-sound>\n  </n-action-activator>\n</n-view-prompt>\n```\n\n### Mode\n\n* **queue**: (default) plays after the previous audio is complete or when it's requested.\n* **play**: stop any playing audio and play now, buffering be-damned.\n* **wait**: wait for action before playing, any currently playing audio continues.\n\n#### Discard\n\n* **video**: when any video plays (default for sound)\n* **state**: state changes\n* **event**: wait for a stop event (or any other activation)\n* **none**: loop until stopped or updated by new state (default for music)\n\n#### Track\n\nIf audio has replay set to true, re-entry to the originating state will re-activate the audio if the previous audio has been deactivated. The default is false.\n",
      "docs": "This element declares audio used within this \\<n-view-prompt\\> route.\nThe \\<n-audio-action-sound-load\\> instructs the player to load audio files\nwhile defining play behaviors.\n\nThe audio player will pre-load or play when the route is active.\nThe player manages them according to their settings.",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        },
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "discard",
          "type": "\"next\" | \"none\" | \"route\"",
          "mutable": false,
          "attr": "discard",
          "reflectToAttr": false,
          "docs": "The discard strategy the player should use for this file.",
          "docsTags": [],
          "default": "'route'",
          "values": [
            {
              "value": "next",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            },
            {
              "value": "route",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"load\" | \"play\" | \"queue\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "This is the loading strategy that determines\nwhat it should do after the file is retrieved.",
          "docsTags": [],
          "default": "'load'",
          "values": [
            {
              "value": "load",
              "type": "string"
            },
            {
              "value": "play",
              "type": "string"
            },
            {
              "value": "queue",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "The path to the audio-file.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "trackId",
          "type": "string",
          "mutable": false,
          "attr": "track-id",
          "reflectToAttr": false,
          "docs": "The identifier for this music track",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any>>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<AudioInfo | AudioRequest | any>>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-audio-switch/audio-switch.tsx",
      "encapsulation": "none",
      "tag": "n-audio-switch",
      "readme": "# N-AUDIO-SWITCH\n\nThe [`n-audio-switch`](/components/n-audio-switch) element exposes a checkbox to enable or disable global audio, for background sounds and video components.\n\n",
      "docs": "This element exposes a checkbox to enable or disable global audio for background sounds and video.",
      "docsTags": [
        {
          "name": "system",
          "text": "audio"
        }
      ],
      "usage": {
        "basic": "Display a checkbox for users to set a preference for sound. Disabled mutes all videos and disables all presentational audio.\n\nUsing the [`n-audio-switch`](/components/n-audio-switch) element description.\n\n```html\n<n-audio-switch></n-audio-switch>\n```\n"
      },
      "props": [
        {
          "name": "dataProvider",
          "type": "string",
          "mutable": false,
          "attr": "data-provider",
          "reflectToAttr": false,
          "docs": "The data provider to store the audio state in.",
          "docsTags": [],
          "default": "'storage'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inputClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-class",
          "reflectToAttr": false,
          "docs": "Any classes to add to the input-element directly.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-id",
          "reflectToAttr": false,
          "docs": "The id field to add to the input-element directly.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "setting",
          "type": "\"enabled\" | \"muted\"",
          "mutable": false,
          "attr": "setting",
          "reflectToAttr": false,
          "docs": "Which state property this switch controls.",
          "docsTags": [],
          "default": "'enabled'",
          "values": [
            {
              "value": "enabled",
              "type": "string"
            },
            {
              "value": "muted",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content/content.tsx",
      "encapsulation": "none",
      "tag": "n-content",
      "readme": "# N-CONTENT\n\nThis component should surround the inner-content of a remote HTML file that can be prioritized during SPA navigation. When pulled in using `n-content-include`, `n-view`, or `n-view-prompt` the content area inside will be fetched with the rest of the HTML ignored. This provides a hybrid SSG+SPA approach to navigation for great SEO scores and snappy navigation.\n\n## Example\n#### /index.html\n```html\n<html>\n  <head>\n    ...\n  </head>\n  <body>\n    <header>\n      <nav>...</nav>\n    </header>\n    <main>\n      <n-views>\n        <n-view path=\"/\" \n          page-title=\"Home\">\n          Home Page Content\n        </n-view>\n        <n-view path=\"about-us\"\n          page-title=\"About Us\" \n          src=\"/about-us/index.html\">\n          <!-- Only the n-content's innerHTML is rendered:\n          <section>\n            My page's content.\n          </section>\n           -->\n        </n-view>\n      </n-views>\n    </main>\n    <footer>\n      ...\n    </footer>\n  </body>\n```\n\n#### /about-us/index.html\n```html\n<html>\n  <head>\n    ...\n  </head>\n  <body>\n    <header>\n      <nav>...</nav>\n    </header>\n    <main>\n      <n-content>\n        <section>\n          My page's content.\n        </section>\n      </n-content>\n    </main>\n    <footer>\n      ...\n    </footer>\n  </body>\n```\n\n```html\n<>\n```\n",
      "docs": "This component should surround the inner-content of a remote HTML file that can be prioritized during SPA navigation.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        }
      ],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-include/content-include.tsx",
      "encapsulation": "none",
      "tag": "n-content-include",
      "readme": "# N-CONTENT-INCLUDE\n\nThis element fetches remote HTML and renders it safely and directly into the page when and where you tell it too, as soon as it renders.\n",
      "docs": "This element fetches remote HTML and renders it safely and directly\ninto the page when and where you tell it too, as soon as it renders.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic": "\n```html\n<n-content-include src='url-to-file'> \n</n-content-include>\n```\n\n### Delayed Rendering\n\nWhen using this element, you may want to delay the fetch until the content is needed. The **defer-load** attribute will prevent the HTML from being fetched until that attribute is removed.\n\n```html\n<n-content-include id='include' \n  src='<url-to-html>' \n  defer-load> </n-content-include>\n```\n\nYou can remove the attribute programmatically to force the fetch:\n\n```javascript\nconst include = document.querySelector('#include);\ninclude.removeAttribute('defer-load');\n```\n\nOr, just include it in one of the [`n-view`](/components/n-view) or [`n-view-prompt`](/components/n-view-prompt) elements. These elements remove any **defer-load** attributes on child elements once their route is activated, giving us lazy-loaded routes with this element."
      },
      "props": [
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "json",
          "type": "string | undefined",
          "mutable": false,
          "attr": "json",
          "reflectToAttr": false,
          "docs": "The JSONata expression to select the HTML from a json response.\nsee <https://try.jsonata.org> for more info.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "Cross Origin Mode",
          "docsTags": [],
          "default": "'cors'",
          "values": [
            {
              "value": "cors",
              "type": "string"
            },
            {
              "value": "navigate",
              "type": "string"
            },
            {
              "value": "no-cors",
              "type": "string"
            },
            {
              "value": "same-origin",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "resolveTokens",
          "type": "boolean",
          "mutable": false,
          "attr": "resolve-tokens",
          "reflectToAttr": false,
          "docs": "Before rendering HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "Remote Template URL",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": true,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-markdown/content-markdown.tsx",
      "encapsulation": "none",
      "tag": "n-content-markdown",
      "readme": "# N-CONTENT-MARKDOWN\n\nThis element converts markdown text to HTML. It can render from an inline-template or a remote source. \n\n## Styling\n\nBy default, there is no styling added to the rendered HTML, so it blends with your site's styles. \n\n",
      "docs": "This element converts markdown text to HTML. It can render\nfrom an inline-template or from a remote source.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "data-tokens": "\n### Resolve Tokens\n\nThis element can optionally render data-tokens directly without the need for the [`n-content-template`](/components/n-content-template) element. Just add the **resolve-tokens** attribute.\n\n```html\n<!-- Do not set the `src` attribute -->\n<n-content-markdown resolve-tokens>\n  <!-- Write your markdown -->\n  <script type='text/markdown'>\n    # **This** is a value from session: {{session:name}}\n  </script>\n</n-content-markdown>\n```",
        "inline": "\n### Inline Markdown\n\nA `<script>` tag can be inserted inside of the element to provide the markdown source. It overrides the markdown and src attributes. Support for changing this markdown source dynamically is not yet implemented.\n\n```html\n<!-- Do not set the `src` attribute -->\n<n-content-markdown>\n  <!-- Write your markdown inside a `<script type='text/markdown'>` tag -->\n  <script type='text/markdown'>\n    # **This** is my [markdown](https://example.com)\n    This <button onclick=\"alert('JavaScript executed')\">button</button> is evil\n  </script>\n</n-content-markdown>\n```",
        "remote": "\nThe `src` attribute can be used to load a markdown file through AJAX. It overrides the markdown attribute. The source can be dynamically updated to change the markdown file displayed.\n\n```html\n<!-- Simply set the `src` attribute and win -->\n<n-content-markdown \n  src='https://example.com/markdown.md'>\n</n-content-markdown>\n```\n\n#### Delayed Rendering\n\nWhen using this element, you may want to delay the fetch until the content is needed. The **defer-load** attribute will prevent the HTML from being fetched until that attribute is removed.\n\n```html\n<n-content-markdown \n  id='markdown' \n  src='<url-to-html>' \n  defer-load> \n</n-content-markdown>\n```\n\nYou can remove the attribute programmatically to force the fetch:\n\n```javascript\nconst include = document.querySelector('#markdown);\ninclude.removeAttribute('defer-load');\n```\n\nOr, just include it in one of the [`n-view`](/components/n-view) or [`n-view-prompt`](/components/n-view-prompt) elements. These elements remove any **defer-load** attributes on child elements once their route is activated, giving us lazy-loaded routes with this element."
      },
      "props": [
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "json",
          "type": "string | undefined",
          "mutable": false,
          "attr": "json",
          "reflectToAttr": false,
          "docs": "The JSONata expression to select the markdown from a json response.\nsee <https://try.jsonata.org> for more info.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "Cross Origin Mode",
          "docsTags": [],
          "default": "'cors'",
          "values": [
            {
              "value": "cors",
              "type": "string"
            },
            {
              "value": "navigate",
              "type": "string"
            },
            {
              "value": "no-cors",
              "type": "string"
            },
            {
              "value": "same-origin",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "noCache",
          "type": "boolean",
          "mutable": false,
          "attr": "no-cache",
          "reflectToAttr": false,
          "docs": "Force render with data & route changes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "resolveTokens",
          "type": "boolean",
          "mutable": false,
          "attr": "resolve-tokens",
          "reflectToAttr": false,
          "docs": "Before rendering HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string | undefined",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "Remote Template URL",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-reference/content-reference.tsx",
      "encapsulation": "none",
      "tag": "n-content-reference",
      "readme": "# N-CONTENT-REFERENCE\n\nThis element makes a single reference to script and CSS sources. It can be used by HTML fragments to ensure a reference is made, without worrying that it will create duplicate references.\n\nIf inline is present, the source would be nested inside this element, otherwise, it is appended to the head.\n\n## Element \n\n```html\n<n-content-reference\n  script-src='<url>'\n  style-src='<url>'>\n</n-content-reference>\n```\n",
      "docs": "This element makes a single reference to script and css sources. It can\nbe used by HTML fragment to ensure a reference is made, without worrying\nthat it will create duplicate references.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        }
      ],
      "usage": {
        "basic": "",
        "inline": "### Ensure Inline Reference\n\n```html\n<html>\n  <head></head>\n  <body>\n    <n-content-reference style-src='assets/styles.css' inline />\n  </body>\n</html>\n```\n\n**Results**:\n\n```html\n<html>\n  <head></head>\n  <body>\n    <n-content-reference style-src='assets/styles.css'>\n      <link rel='stylesheet' href='assets/styles.css' />\n    </n-content-reference>\n  </body>\n</html>\n```\n\n",
        "scripts": "\n### Ensure Script References\n\n```html\n<html>\n  <head></head>\n  <body>\n    <n-view path='/home'>\n      <n-content-reference script-src='lib/script.js' />\n    </n-view>\n    <n-view path='/page-1'>\n      <n-content-reference script-src='lib/script.js' />\n    </n-view>\n  </body>\n</html>\n```\n\n**Results**:\n\n```html\n<html>\n  <head>\n    <script src='lib/script.js'></script>\n  </head>\n  <body>\n    <n-view path='/home'>\n      <n-content-reference script-src='lib/script.js' />\n    </n-view>\n    <n-view path='/page-1'>\n      <n-content-reference script-src='lib/script.js' />\n    </n-view>\n  </body>\n</html>\n```",
        "styles": "### Ensure Style Reference\n\n```html\n<html>\n  <head></head>\n  <body>\n    <n-content-reference style-src='assets/styles.css' />\n  </body>\n</html>\n```\n\n**Results**:\n\n```html\n<html>\n  <head>\n    <link rel='stylesheet' href='assets/styles.css' />\n  </head>\n  <body>\n    <n-content-reference style-src='assets/styles.css' />\n  </body>\n</html>\n```\n"
      },
      "props": [
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inline",
          "type": "boolean",
          "mutable": false,
          "attr": "inline",
          "reflectToAttr": false,
          "docs": "When inline the link/script tags are rendered in-place\nrather than added to the head.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "module",
          "type": "boolean",
          "mutable": false,
          "attr": "module",
          "reflectToAttr": false,
          "docs": "Import the script file as a module.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "noModule",
          "type": "boolean",
          "mutable": false,
          "attr": "no-module",
          "reflectToAttr": false,
          "docs": "Declare the script only for use when\nmodules aren't supported",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scriptSrc",
          "type": "string | undefined",
          "mutable": false,
          "attr": "script-src",
          "reflectToAttr": false,
          "docs": "The script file to reference.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "styleSrc",
          "type": "string | undefined",
          "mutable": false,
          "attr": "style-src",
          "reflectToAttr": false,
          "docs": "The css file to reference",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "timeout",
          "type": "number",
          "mutable": false,
          "attr": "timeout",
          "reflectToAttr": false,
          "docs": "Timeout (in milliseconds) to wait for the references\nto load.",
          "docsTags": [],
          "default": "1000",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "forceLoad",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "forceLoad() => Promise<void>",
          "parameters": [],
          "docs": "Force the 'load' event of the script or link element.\nThis is meant for testing.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "referenced",
          "detail": "{ type: ReferenceType; loaded: boolean; }",
          "bubbles": true,
          "cancelable": false,
          "composed": true,
          "docs": "This event is fired when the script and style\nelements are loaded or timed out. The value for each\nstyle and script will be true or false, for loaded\nor timedout, respectively.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "n-audio"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "n-audio": [
          "n-content-reference"
        ]
      }
    },
    {
      "filePath": "./src/components/n-content-repeat/content-repeat.tsx",
      "encapsulation": "none",
      "tag": "n-content-repeat",
      "readme": "# N-CONTENT-REPEAT\n\nThis tag renders a template for each item in the configured array. The item template uses value expressions to insert data from any [data provider](/data/providers) as well as the item in the array.\n\n## Element\n\n```html\n<n-content-repeat items='{{expression}}'>\n  <template>\n    <div>{{data}}</div>\n  </template>\n</n-content-repeat>\n```\n\n## Template Interpolation\n\nThis component supports HTML string interpolation within a child template tag. Each item from the configured collection will be rendered with this template.\n\n**Data Token Format:** `{<provider>:<data-key>(?<default>)}`\n\n**provider**: the data provider name\n**data-key**: the data value key within the provider \\*\n**default**: optional default value if the provider's key is empty.\n\n\\* _If there are any dots in the key, the evaluator attempts to parse the base value as JSON, then uses the dot-notation to select a value from the object. For example, the expression `{{data:user.name}}` means the session value 'user' is a JSON object, parse it and replace it with the 'name' property._\n\n> ℹ️ Note: See [data](/data) for full documentation\n\n\n## Items Source\n\nThis element supports three ways to express the collection or where it comes from.\n",
      "docs": "This tag renders a template for each item in the configured array.\nThe item template uses value expressions to insert data from any\ndata provider as well as the item in the array.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "attributes": "The `items` attribute can be any array-string or an [expression](/data/expressions) to pull data from a registered provider.\n\n### Items from Attribute (Simple Array)\n\n```html\n<n-content-repeat items=\"['one','two','three']\">\n  <template>\n    <div>{{data:item}}</div>\n  </template>\n</n-content-repeat>\n```\n\n### Items from Attribute (Provider Array)\n\n```html\n<n-content-repeat items='{{storage:cart-items}}'>\n  <template>\n    <div>{{data:productName}}</div>\n  </template>\n</n-content-repeat>\n```",
        "remote": "\n### Items from Remote URL (Remote Array)\n\n```html\n<n-content-repeat items-src='/data/items.json'>\n  <template>\n    <div style='color: {{data:color}};'>{{data:name}}</div>\n  </template>\n</n-content-repeat>\n```",
        "script": "### Items from Inline Script (Object Array)\n\n```html\n<n-content-repeat>\n  <script type='application/json'>\n    [\n      { 'color': 'blue', 'name': 'Bob' },\n      { 'color': 'red', 'name': 'Sally' }\n    ]\n  </script>\n  <template>\n    <div style='color: {{data:color}};'>{{data:name}}</div>\n  </template>\n</n-content-repeat>\n```"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debug statements for load, update and render events.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "filter",
          "type": "string | undefined",
          "mutable": false,
          "attr": "filter",
          "reflectToAttr": false,
          "docs": "The JSONata query to filter the json items\nsee <https://try.jsonata.org> for more info.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "items",
          "type": "string | undefined",
          "mutable": false,
          "attr": "items",
          "reflectToAttr": false,
          "docs": "The array-string or data expression to obtain a collection for rendering the template.\n{{session:cart.items}}",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "itemsSrc",
          "type": "string | undefined",
          "mutable": false,
          "attr": "items-src",
          "reflectToAttr": false,
          "docs": "The URL to remote JSON collection to use for the items.",
          "docsTags": [
            {
              "name": "example",
              "text": "/data.json"
            }
          ],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "noCache",
          "type": "boolean",
          "mutable": false,
          "attr": "no-cache",
          "reflectToAttr": false,
          "docs": "Force render with data & route changes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-reveal/content-reveal.tsx",
      "encapsulation": "shadow",
      "tag": "n-content-reveal",
      "readme": "# N-CONTENT-REVEAL\n\nUse this element to add a little flair to any HTML. It creates an entrance animation using the configured attributes to add pop to any page.\n\n## Element\n\n```html\n<n-content-reveal \n  direction=''\n  delay=''\n  duration=''\n  animation-distance=''\n  trigger-distance=''>\n  ...\n</n-content-reveal>\n```\n",
      "docs": "Use this element to add a little flair to any HTML.\nIt creates an entrance animation using the configured\nattributes to add pop to any page.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "animationDistance",
          "type": "string",
          "mutable": false,
          "attr": "animation-distance",
          "reflectToAttr": false,
          "docs": "How far the element moves in the animation (% of element width/height)",
          "docsTags": [],
          "default": "'30%'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "delay",
          "type": "number",
          "mutable": false,
          "attr": "delay",
          "reflectToAttr": false,
          "docs": "How long to delay the animation (ms)",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "direction",
          "type": "\"down\" | \"left\" | \"right\" | \"up\"",
          "mutable": false,
          "attr": "direction",
          "reflectToAttr": false,
          "docs": "Direction the element moves when animating in",
          "docsTags": [],
          "default": "'up'",
          "values": [
            {
              "value": "down",
              "type": "string"
            },
            {
              "value": "left",
              "type": "string"
            },
            {
              "value": "right",
              "type": "string"
            },
            {
              "value": "up",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "duration",
          "type": "number",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "How long the animation runs (ms)",
          "docsTags": [],
          "default": "500",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "triggerDistance",
          "type": "string",
          "mutable": false,
          "attr": "trigger-distance",
          "reflectToAttr": false,
          "docs": "How much of the element must be visible before it animates (% of element height)",
          "docsTags": [],
          "default": "'33%'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-show/content-show.tsx",
      "encapsulation": "none",
      "tag": "n-content-show",
      "readme": "# N-CONTENT-SHOW\n\nThis tag conditionally renders child elements based on the configured predicate applied to the when value predicate. To learn more about predicates, check out the [expressions](/data/expressions) documentation.\n\n## Element\n\n```html\n<n-content-show \n  when='<expression>'>\n  ... contents ...\n</n-content-show>\n```\n",
      "docs": "This element conditionally renders child elements based on the\nconfigured predicate applied to the when value predicate.\nTo learn more about predicates, check out the\nexpressions documentation.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        },
        {
          "name": "extension",
          "text": "data"
        }
      ],
      "usage": {
        "basic": "### Show\n\n```html\n<n-content-show \n  when='true'>\n  \n</n-content-show>\n```\n\n### Hide\n\n```html\n<n-content-show \n  when='false'>\n  \n</n-content-show>\n```\n\n### Expressions\n\n```html\n<n-content-show \n  when='1 in [1,2]'>\n  ... shows! ...\n</n-content-show>\n```\n\n```html\n<n-content-show \n  when='3 in [1,2]'>\n  ... hides! ...\n</n-content-show>\n```\n\n```html\n<n-content-show \n  when='5 > 4'>\n  ... shows! ...\n</n-content-show>\n```"
      },
      "props": [
        {
          "name": "when",
          "type": "string",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "The data expression to obtain a predicate for conditionally rendering\nthe inner-contents of this element.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-content-template/content-template.tsx",
      "encapsulation": "none",
      "tag": "n-content-template",
      "readme": "# N-CONTENT-TEMPLATE\n\nRender data directly into HTML using declarative expressions. This element renders the expression with all data-tokens replaced with the values provided by the provider.\n\n## Element\n\n```html\n<n-content-template>\n  <template>\n    <any>{{expression}}</any>\n  </template>\n</n-content-template>\n```\n",
      "docs": "Render data directly into HTML using declarative expressions.\nThis element renders the expression with all data-tokens\nreplaced with the values provided by the provider.",
      "docsTags": [
        {
          "name": "system",
          "text": "content"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic": "\n```html\n<n-content-template text='{{expression}}'> </n-content-template>\n```\n\nThe expression can be any string or an expression with tokens from a registered provider.\n\n### Template Interpolation\n\nThis element supports HTML string interpolation within a child template tag. The values get resolved, just like the expression. The values in the attributes replace the tokens in the content.\n\n```html\n<n-content-template>\n  <template>\n    <h1>Hello {{expression}}!</h1>\n  </template>\n</n-content-template>\n```\n\n> ℹ️ Note: This element only supports template interpolation within the **\\<template\\>** tag.\n\n",
        "graphql": "\n```html\n<n-content-template graphql \n  src='https://content.io/graphql'\n  filter=\"$sum(data.cart.items.(cost*count))\"\n  >\n  <n-query data-value=\"{{user:id}}\">\n    query cart(id: $value) {\n      items {\n        count\n        cost\n      }\n    }\n  </n-query>\n  <template>\n    {{data:item}}\n  </template>\n  \n  </n-content-template>\n```\n\n### GraphQL Response\n```json\n{\n  \"data\": {\n    \"cart\": [\n      {\n        \"items\": [\n          {\n            \"count\": 3,\n            \"cost\": 5\n          },\n          {\n            \"count\": 3,\n            \"cost\": 8\n          }\n        ],\n        \"effective\": \"2022-06-01\"\n      }\n    ]\n  }\n}\n```\n\n### JSON Filter transforms the response data to this:\n\nThe expression can be any string or an expression with tokens from a registered provider.\n\n\n",
        "json": "\nYou can provide the data to use for this element directly in-line using a inner script tag.\n\n```html\n<n-content-template>\n  <script type=\"text/json\">\n  {\n    \"name\": \"Stella\",\n    \"age\": 35\n  }\n  </script>\n  <template>\n    <h1>{{data:name}} is {{data:age}}</h1>\n  </template>\n</n-content-template>\n```"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debug statements for load, update and render events.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-rendering of this instance.\nTo fetch the contents change to false or remove\nattribute.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "filter",
          "type": "string | undefined",
          "mutable": false,
          "attr": "filter",
          "reflectToAttr": false,
          "docs": "The JSONata query to filter the json items\nsee <https://try.jsonata.org> for more info.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "graphql",
          "type": "boolean",
          "mutable": false,
          "attr": "graphql",
          "reflectToAttr": false,
          "docs": "When declared, the child script tag is required and should be\nthe query text for the request. Also, this forces the HTTP\nmethod to 'POST'.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "Cross Origin Mode",
          "docsTags": [],
          "default": "'cors'",
          "values": [
            {
              "value": "cors",
              "type": "string"
            },
            {
              "value": "navigate",
              "type": "string"
            },
            {
              "value": "no-cors",
              "type": "string"
            },
            {
              "value": "same-origin",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "noCache",
          "type": "boolean",
          "mutable": false,
          "attr": "no-cache",
          "reflectToAttr": false,
          "docs": "Force render with data & route changes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string | undefined",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "The URL to remote JSON data to bind to this template",
          "docsTags": [
            {
              "name": "example",
              "text": "/data.json"
            }
          ],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "text",
          "type": "string | undefined",
          "mutable": false,
          "attr": "text",
          "reflectToAttr": false,
          "docs": "The data expression to obtain a value for rendering as inner-text for this element.",
          "docsTags": [
            {
              "name": "default",
              "text": "null"
            }
          ],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A data-token predicate to advise this element when\nto render (useful if used in a dynamic route or if\ntokens are used in the 'src' attribute)",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-data/data.tsx",
      "encapsulation": "shadow",
      "tag": "n-data",
      "readme": "# N-DATA\n\nThe `<n-data>` element enables the data system. Once enabled, [data expressions](/data/expressions) can be used to inject data into the [content](/content) or used for [ navigation](/routing/navigation).\n\n> ℹ️ Note: See [data](/data) for full documentation\n\n",
      "docs": "This element enables the Data Provider system. It hosts\nthe action-listener that registers providers.  Add this tag\nto that page to enable token-replacement.",
      "docsTags": [
        {
          "name": "system",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "custom"
        }
      ],
      "usage": {
        "add-session": "Enable the data provider system and add storage data as a provider.\n\n```html\n<n-data>\n  <n-data-session></n-data-session>\n</n-data>\n```\n",
        "add-storage": "Enable the data provider system and add storage data as a provider.\n\n```html\n<n-data>\n  <n-data-storage></n-data-storage>\n</n-data>\n```\n",
        "basic": "Enable the data provider system to enable token replacement.\n\n```html\n<n-data> </n-data>\n```\n"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debugging to get helpful messages from the\ndata action systems.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "providerTimeout",
          "type": "number | undefined",
          "mutable": false,
          "attr": "provider-timeout",
          "reflectToAttr": false,
          "docs": "The wait-time, in seconds to wait for\nun-registered data providers found in an expression.\nThis is to accommodate a possible lag between\nevaluation before the first predicate\nand the registration process.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-data-cookie/data-cookie.tsx",
      "encapsulation": "shadow",
      "tag": "n-data-cookie",
      "readme": "# N-DATA-COOKIE\n\nThis element enables the **Cookie Data Provider**, after requesting consent from the user. The consent message and the accept/reject button are customizable.\n\n## Cookie Data Provider\n\nThis store is long-lived from the same browser, but for very small data items. This provider enables you to use cookie data in your HTML.\n\nProvider Key: '**cookie**'\n\n`{{cookie:(key)}}`\n\nWhen included on the page, this element automatically shows a banner to collect consent from the user. You MUST supply clickable elements and decorate them with **n-accept** and **n-reject** attributes, respecting the user's decision.\n\nThe element listens for their click events and acts accordingly.\n\n```html\n<n-data-cookie>\n  <p>Cookies help us track your every move.</p>\n  <button n-accept>Accept</button>\n  <button n-reject>Decline</button>\n</n-data-cookie>\n```\n\n> ℹ️ Note: The HTML inside the element is shown directly on the banner. Use it to display your terms, privacy policy and explanation for using the cookie.\n\nAlternatively, you can skip this by including the 'skip-consent' attribute.\n\n```html\n<n-data--cookie skip-consent></n-data--cookie>\n```\n",
      "docs": "This element enables the *Cookie Data Provider*,\nafter requesting consent from the user. The consent\nmessage and the accept/reject button are customizable.",
      "docsTags": [
        {
          "name": "system",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "provider"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "Provider name to use in nent expressions.",
          "docsTags": [],
          "default": "'cookie'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "skipConsent",
          "type": "boolean",
          "mutable": false,
          "attr": "skip-consent",
          "reflectToAttr": false,
          "docs": "When skipConsent is true, the accept-cookies banner will not\nbe displayed before accessing cookie-data.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "registerProvider",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "registerProvider() => Promise<void>",
          "parameters": [],
          "docs": "Immediately register the provider.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "didConsent",
          "detail": "{ consented: boolean; }",
          "bubbles": true,
          "cancelable": false,
          "composed": true,
          "docs": "This event is raised when the user consents to cookies.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-data-session/data-session.tsx",
      "encapsulation": "shadow",
      "tag": "n-data-session",
      "readme": "# N-DATA-SESSION\n\nThis element enables the **Session Data Provider**.\n\n## Cookie Data Provider\n\nThis store is short-lived within the browsing session of an exact browser. This provider enables you to use session data in your HTML.\n\nProvider Key: '**session**'\n\n`{{session:(key)}}`\n",
      "docs": "This element enables the **Session Data Provider**.\nIt leverages the short-lived browser storage.",
      "docsTags": [
        {
          "name": "system",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "provider"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "keyPrefix",
          "type": "string | undefined",
          "mutable": false,
          "attr": "key-prefix",
          "reflectToAttr": false,
          "docs": "The key prefix to use in storage",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "Provider name to use in nent expressions.",
          "docsTags": [],
          "default": "'session'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-data-storage/data-storage.tsx",
      "encapsulation": "none",
      "tag": "n-data-storage",
      "readme": "# N-DATA-STORAGE\n\nThis element enables the **Storage Data Provider**.\n\n## Cookie Data Provider\n\nThis store is short-lived within the browsing storage of an exact browser. This provider enables you to use storage data in your HTML.\n\nProvider Key: '**storage**' (or custom)\n\n`{{storage:(key)}}`\n",
      "docs": "This element enables the **Storage Data Provider**, that\nleverages the browsers 'long-term' data storage.",
      "docsTags": [
        {
          "name": "system",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "provider"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "keyPrefix",
          "type": "string | undefined",
          "mutable": false,
          "attr": "key-prefix",
          "reflectToAttr": false,
          "docs": "The key prefix to use in storage",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "name",
          "type": "string",
          "mutable": false,
          "attr": "name",
          "reflectToAttr": false,
          "docs": "Provider name to use in nent expressions.",
          "docsTags": [],
          "default": "'storage'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-elements/elements.tsx",
      "encapsulation": "none",
      "tag": "n-elements",
      "readme": "# N-ELEMENTS\n\n\nChild Attribute Detection & Resolution\n\n## Install `<n-elements\\>`\n\n```html\n<n-elements></n-elements>\n```\n\n## [n-hide-when]\n\nFor each child element with this attribute, the value of the attribute is evaluated for a predicate – and if TRUE, the element is hidden. This evaluation occurs whenever data changes.\n\n```html\n<any n-hide-when='predicate' />\n```\n\n## [n-show-when]\n\nFor each child element with this attribute, the value of the attribute is evaluated for a predicate – and if FALSE, the element is shown. This evaluation occurs whenever data changes.\n\n```html\n<any n-show-when='predicate' hidden />\n```\n\n> ℹ️ Note: To initially hide the element, be sure to include the ‘hidden’ attribute.\n\n## Conditioned Classes: [n-class-when] && [n-class]\n\nThis pair of attributes conditionally toggle the class specified in the `n-class` attribute using the `n-class-where` expression.\n\n```html\n<any n-class='class' \n  n-class-when='predicate'></any>\n```\n\n## Value From: [n-value-from]\n\nInput-type elements (input, textarea, and select) can specify a data expression for its value. This informs the route container to update this value when it changes.\n\n```html\n<any n-class='class' n-class-when='predicate'></any>\n```\n",
      "docs": "This element enables element manipulation through the n-actions element.\nAdd it to the page to perform actions like 'add-css', toggle\nattributes or to execute functions on the DOM without code.",
      "docsTags": [
        {
          "name": "system",
          "text": "elements"
        },
        {
          "name": "extension",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debug statements for load, update and render events.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-presentation/presentation.tsx",
      "encapsulation": "none",
      "tag": "n-presentation",
      "readme": "# N-PRESENTATION\n\nThe presentation component is a time stage for which actions can be activated along a timeline. Presentations require a timer element, like a [`n-video`](/components/n-video). If there isn't a video to use for time, NENT ships with a basic timer [`n-presentation-timer`](/components/n-presentation-timer) to create a timeline. This way you can set a duration and activate animations or sound on your own.\n\n\n## Timed ELements\n\nIn addition to [`actions`](/actions), you can place easy-to-use timed attributes on any element within the stage to synchronize them directly. \n\n> ℹ️ Note: To enable this feature, you have to install the [`n-elements`](/elements) extension.\n\nSee [presentation elements](./elements) for more information.\n\n",
      "docs": "This element encapsulates a timed presentation. This element uses\na child n-presentation-timer or n-video element to create time-events\nthen it delegates those events to time-based action-activators.\n\nIf enabled, the n-attributes for time will also get processed. This\nelement also has the ability to go to the next route using the active\nroute's 'goNext' function.",
      "docsTags": [
        {
          "name": "system",
          "text": "presentation"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic-with-timer": "```html\n<n-presentation>\n  <n-presentation-timer duration=\"3\">\n  </n-presentation-timer>\n  <n-presentation-action time=\"2\" \n    topic=\"elements\"\n    command=\"add-class\" \n    data-selector=\"#animation\"\n    data-class=\".fadeIn\">\n  </n-presentation-action>\n</n-presentation>\n```",
        "basic-with-video": "```html\n<n-presentation>\n  <n-video src=\"my.mov\">\n  </n-video>\n  <n-presentation-action time=\"2\" \n    topic=\"elements\"\n    command=\"add-class\" \n    data-selector=\"#animation\"\n    data-class=\".fadeIn\">\n  </n-presentation-action>\n</n-presentation>\n```\n\n> ℹ️ Note: When using a video, the timed data from the video is used as the timing-source. This means scrub, pause and skip are all respected with the timed actions and elements.",
        "video-timed-elements": "```html\n<n-presentation>\n  <n-video target-element=\"player\">\n    <video>\n      <source cross-origin=\"anonymous\"\n        src=\"https://cdn.videvo.net/videvo_files/video/premium/video0290/small_watermarked/_LightShow86_preview.webm\"\n        type=\"video/webm\" />\n    </video>\n  </n-video>\n  <div hidden\n    n-in-time=\"0\"\n    class=\"fade-in\"\n    n-out-time=\"3\">\n    <h3>First</h3>\n    <p>This content appears for the first 3 seconds.</p>\n  </div>\n  <div hidden\n    n-in-time=\"3\"\n    class=\"fade-in\"\n    n-out-time=\"6\">\n    <h3>THEN...</h3>\n    <p>This content appears for the until 6 seconds has passed.</p>\n  </div>\n  <div hidden\n    n-in-time=\"6\"\n    class=\"fade-in\"\n    n-out-time=\"10\">\n    <h3>Finally...</h3>\n    <p>This content shows until the end.</p>\n  </div>\n</n-presentation>\n```\n\n> ℹ️ Note: For more information on timed-elements, read about the ([`\\<n-elements\\>](./elements)) extension.\n",
        "with-action-activator": "```html\n<n-presentation>\n  <n-presentation-timer duration=\"3\">\n  </n-presentation-timer>\n  <n-action-activator activate='at-time' \n    time='2'>\n    <n-action \n      topic=\"elements\"\n      command=\"add-class\" \n      data-selector=\"#animation\"\n      data-class=\".fadeIn\">\n    </n-action>\n  </n-action-activator>\n</n-presentation>\n```",
        "with-action-activator-at-time": "```html\n<n-presentation>\n  <n-video ...>\n  </n-video>\n  <n-action-activator activate='at-time-end'>\n    <n-action \n      topic=\"elements\"\n      command=\"add-class\" \n      data-selector=\"#animation\"\n      data-class=\".fadeIn\">\n    </n-action>\n  </n-action-activator>\n</n-presentation>\n```\n> ℹ️ Note: The `at-time=end` activation-strategy fires when the duration is up or the video ends.."
      },
      "props": [
        {
          "name": "analyticsEvent",
          "type": "string | undefined",
          "mutable": false,
          "attr": "analytics-event",
          "reflectToAttr": false,
          "docs": "Send analytics view-time percentages for this presentation\nusing the event name",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "To debug timed elements, set this value to true.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "nextAfter",
          "type": "boolean | string",
          "mutable": false,
          "attr": "next-after",
          "reflectToAttr": false,
          "docs": "Go to the next view after the timer ends",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "timerElement",
          "type": "null | string",
          "mutable": false,
          "attr": "timer-element",
          "reflectToAttr": false,
          "docs": "The element selector for the timer-element to\nbind for interval events. If left blank, it looks\nfirst an n-timer, then for the first n-video.\n\nIf none are found, it creates one manually and starts\nit immediately",
          "docsTags": [],
          "default": "null",
          "values": [
            {
              "type": "null"
            },
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-presentation-action/presentation-action.tsx",
      "encapsulation": "none",
      "tag": "n-presentation-action",
      "readme": "# N-PRESENTATION-ACTION\n\nFor use in the `n-presentation` element only. Action activation occurs when the `n-presentation` element reaches a certain time.\n\n> ℹ️ Note: This element combines the `n-action-activator` and `n-action` for convenience. It uses the activation strategy `at-time`.\n",
      "docs": "This specialized action contains the time attribute,\nallowing it to be activated directly within the n-presentation\nelement (no n-action-activator needed)",
      "docsTags": [
        {
          "name": "system",
          "text": "presentation"
        },
        {
          "name": "system",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": "\n```html\n<n-presentation>\n  <n-video ...>\n  </n-video>\n  <n-presentation-action time=\"2\" \n    topic=\"elements\"\n    command=\"add-class\" \n    data-selector=\"#animation\"\n    data-class=\".fadeIn\">\n  </n-n-presentation-action>\n</n-presentation>\n```"
      },
      "props": [
        {
          "name": "command",
          "type": "string",
          "mutable": false,
          "attr": "command",
          "reflectToAttr": false,
          "docs": "The command to execute.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "time",
          "type": "\"end\" | number | undefined",
          "mutable": false,
          "attr": "time",
          "reflectToAttr": false,
          "docs": "The time this should execute",
          "docsTags": [],
          "values": [
            {
              "value": "end",
              "type": "string"
            },
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "topic",
          "type": "string",
          "mutable": false,
          "attr": "topic",
          "reflectToAttr": false,
          "docs": "This is the topic this action-command is targeting.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "A predicate to evaluate prior to sending the action.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getAction",
          "returns": {
            "type": "Promise<EventAction<any> | null>",
            "docs": ""
          },
          "signature": "getAction() => Promise<EventAction<any> | null>",
          "parameters": [],
          "docs": "Get the underlying actionEvent instance. Used by the n-action-activator element.",
          "docsTags": []
        },
        {
          "name": "sendAction",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "sendAction(data?: Record<string, any> | undefined) => Promise<void>",
          "parameters": [],
          "docs": "Send this action to the action messaging system.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-presentation-timer/presentation-timer.tsx",
      "encapsulation": "none",
      "tag": "n-presentation-timer",
      "readme": "# N-PRESENTATION-TIMER\n\nThe `n-presentation-timer` is useful when you want to create a timeline to stage animations and sound or any other HTML-wizardy as part of a non-video presentation. The element takes a duration and begins when you'd expect: on-route enter (if within a route) OR when the parent element renders to the page. It will run, firing all configure timed actions and elements until the duration is reached.\n",
      "docs": "This element creates a timer for the presentation\nelement to use in place of a video, to time actions\nor manipulate HTML by time.",
      "docsTags": [
        {
          "name": "system",
          "text": "presentation"
        }
      ],
      "usage": {
        "basic": "```html\n<n-elements></n-elements>\n<n-presentation>\n  <n-presentation-timer duration=\"3\">\n  </n-presentation-timer>\n  <div hidden n-show-at=\"1\" n-hide-at=\"3\">\n    A temp message!\n  </div>\n</n-presentation>\n```"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "To debug timed elements, set this value to true.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "deferLoad",
          "type": "boolean",
          "mutable": true,
          "attr": "defer-load",
          "reflectToAttr": false,
          "docs": "If set, disables auto-starting the timer\non render. This will be removed if in a view,\nwhen the view is activated or when the start\nmethod is called.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "display",
          "type": "boolean",
          "mutable": false,
          "attr": "display",
          "reflectToAttr": false,
          "docs": "Display elapsed seconds",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "duration",
          "type": "number",
          "mutable": false,
          "attr": "duration",
          "reflectToAttr": false,
          "docs": "Duration before the timer stops and raises\nthe ended event (seconds). 0 = never",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "interval",
          "type": "number",
          "mutable": false,
          "attr": "interval",
          "reflectToAttr": false,
          "docs": "Interval in milliseconds to request\nbetween the getAnimationFrame. This\naffects the precision.",
          "docsTags": [],
          "default": "200",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "timer",
          "type": "ITimer",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "Normalized timer.",
          "docsTags": [],
          "values": [
            {
              "type": "ITimer"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [
        {
          "name": "begin",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "begin() => Promise<void>",
          "parameters": [],
          "docs": "Begin the timer. This is called automatically\nby the presentation element.",
          "docsTags": []
        },
        {
          "name": "stop",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "signature": "stop() => Promise<void>",
          "parameters": [],
          "docs": "Stop the timer.",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "ready",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Ready event letting the presentation layer know it can\nbegin.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-video/video.tsx",
      "encapsulation": "none",
      "tag": "n-video",
      "readme": "# N-VIDEO\n\n\n",
      "docs": "This element enables the UI services. These are typically\nweb element plug-ins to manage things like Modals, Drawers,\nmenus, etc. The basic provider is used to toggle dark-mode.",
      "docsTags": [
        {
          "name": "system",
          "text": "video"
        },
        {
          "name": "extension",
          "text": "actions"
        }
      ],
      "usage": {
        "basic": "```html\n<n-presentation>\n  <n-video target-element=\"player\">\n    <video>\n      <source cross-origin=\"anonymous\"\n        src=\"https://cdn.videvo.net/videvo_files/video/premium/video0290/small_watermarked/_LightShow86_preview.webm\"\n        type=\"video/webm\" />\n    </video>\n  </n-video>\n  <div hidden\n    n-in-time=\"0\"\n    class=\"fade-in\"\n    n-out-time=\"3\">\n    <h3>First</h3>\n    <p>This content appears for the first 3 seconds.</p>\n  </div>\n  <div hidden\n    n-in-time=\"3\"\n    class=\"fade-in\"\n    n-out-time=\"6\">\n    <h3>THEN...</h3>\n    <p>This content appears for the until 6 seconds has passed.</p>\n  </div>\n  <div hidden\n    n-in-time=\"6\"\n    class=\"fade-in\"\n    n-out-time=\"10\">\n    <h3>Finally...</h3>\n    <p>This content shows until the end.</p>\n  </div>\n</n-presentation>\n```"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "To debug timed elements, set this value to true.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "durationProperty",
          "type": "string",
          "mutable": false,
          "attr": "duration-property",
          "reflectToAttr": false,
          "docs": "Provide the element property name that\nholds the duration time in seconds.\nDefault is duration",
          "docsTags": [],
          "default": "'duration'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "endEvent",
          "type": "string",
          "mutable": false,
          "attr": "end-event",
          "reflectToAttr": false,
          "docs": "Provider the end event name.\nDefault is ended",
          "docsTags": [],
          "default": "'ended'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "readyEvent",
          "type": "string",
          "mutable": false,
          "attr": "ready-event",
          "reflectToAttr": false,
          "docs": "Provide the ready event name.\nDefault is ready",
          "docsTags": [],
          "default": "'ready'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "targetElement",
          "type": "string",
          "mutable": false,
          "attr": "target-element",
          "reflectToAttr": false,
          "docs": "Provide the element selector for the media object that can provide\ntime-updates and media-end events.",
          "docsTags": [],
          "default": "'video'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "timeEvent",
          "type": "string",
          "mutable": false,
          "attr": "time-event",
          "reflectToAttr": false,
          "docs": "Provide the time-event name.\nDefault is timeupdate",
          "docsTags": [],
          "default": "'timeupdate'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "timeProperty",
          "type": "string",
          "mutable": false,
          "attr": "time-property",
          "reflectToAttr": false,
          "docs": "Provide the element property name that\nholds the current time in seconds.\nDefault is currentTime",
          "docsTags": [],
          "default": "'currentTime'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "timer",
          "type": "ITimer",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "Normalized timer.",
          "docsTags": [],
          "values": [
            {
              "type": "ITimer"
            }
          ],
          "optional": false,
          "required": true
        }
      ],
      "methods": [],
      "events": [
        {
          "event": "ready",
          "detail": "any",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "docs": "Ready event letting the presentation layer know it can\nbegin.",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-video-switch/video-switch.tsx",
      "encapsulation": "none",
      "tag": "n-video-switch",
      "readme": "# N-VIDEO-SWITCH\n\nThe `<n-video-switch>` element displays a checkbox to control the autoplay setting used for video playback - as well as automatic navigation to the next page when a video ends.\n\nDefault: enabled\n",
      "docs": "This element displays a checkbox to control the autoplay setting,\nused for video playback - as well as automatic navigation to the\nnext page, when a video ends. Default: enabled",
      "docsTags": [
        {
          "name": "system",
          "text": "video"
        }
      ],
      "usage": {
        "basic": "Add the `<n-video-switch>` element to any page to allow the user to adjust the autoplay setting. You can style it using standard CSS and if necessary, add CSS styles directly to the input element using the **classes** attribute.\n\n```html\n<n-video-switch ...>\n</n-video-switch>\n```\n",
        "with-vime": "```html\n<n-content-reference module\n  script-src=\"https://cdn.jsdelivr.net/npm/@vime/core@^5/dist/vime/vime.esm.js\"\n  style-src=\"https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css\">\n</n-content-reference>\n<n-presentation next-after\n  analytics-event=\"pres-video\">\n  <n-video target-element=\"vm-player\"\n    time-event=\"vmCurrentTimeChange\"\n    end-event=\"vmPlaybackEnded\"\n    ready-event=\"vmPlaybackReady\"\n    time-property=\"currentTime\"\n    duration-property=\"duration\">\n\n    <vm-player no-controls>\n      <vm-video>\n        <source cross-origin=\"anonymous\"\n          data-src=\"https://cdn.videvo.net/videvo_files/video/premium/video0290/small_watermarked/_LightShow86_preview.webm\"\n          type=\"video/webm\" />\n      </vm-video>\n      <vm-default-ui></vm-default-ui>\n    </vm-player>\n  </n-video>\n  <div hidden\n    n-in-time=\"0\"\n    class=\"fade-in\"\n    n-out-time=\"3\">\n    <h3>First</h3>\n    <p>This content appears for the first 3 seconds.</p>\n  </div>\n  <div hidden\n    n-in-time=\"3\"\n    class=\"fade-in\"\n    n-out-time=\"6\">\n    <h3>THEN...</h3>\n    <p>This content appears for the until 6 seconds has passed.</p>\n  </div>\n  <div hidden\n    n-in-time=\"6\"\n    class=\"fade-in\"\n    n-out-time=\"10\">\n    <h3>Finally...</h3>\n    <p>This content shows until the end.</p>\n  </div>\n</n-presentation>\n```"
      },
      "props": [
        {
          "name": "dataProvider",
          "type": "string",
          "mutable": false,
          "attr": "data-provider",
          "reflectToAttr": false,
          "docs": "The data provider to store the audio-enabled state in.",
          "docsTags": [],
          "default": "'storage'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "inputClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-class",
          "reflectToAttr": false,
          "docs": "Any classes to add to the input-element directly.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "inputId",
          "type": "string | undefined",
          "mutable": false,
          "attr": "input-id",
          "reflectToAttr": false,
          "docs": "The id field to add to the input-element directly.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-view/view.tsx",
      "encapsulation": "shadow",
      "tag": "n-view",
      "readme": "# N-VIEW\n\nThe View element is a child element for the `<n-view>` element for adding a page route. It is a container element that displays its inner HTML for a given route or sub-route. This provides a declarative mechanism for in-page content/component routing by URL.\n\n## Extensions\n\n* [Elements](/components/n-view/elements)\n* [Data](/components/n-view/data)\n\n\n> ℹ️ Note: The view element uses the display property in CSS to hide and show based on the route. It is important that any class added does not override this\n\n### Child Views & Routing\n\nViews can hold any HTML, including View elements. This implicitly creates child routes below the path configured for this View. This View will enforce the routing rule, by inserting its path in the child-views path property (This should be done in a way that accounts for the parent path being included in the child path attribute)\n\n```html\n<n-views>\n  <n-view path='/'>\n  ...\n  </n-view>\n  <n-view path='/about'>\n    <n-view path='/location'>\n    ...\n    </n-view>\n  </n-view>\n</n-views>\n```\n\n### View Prompts\n\nThe contained HTML is parsed before rendering and special handling is given if any child elements are [`n-view-prompt`](/components/n-view-prompt) elements. Before rendering its HTML, this element iterates the collection and evaluates their conditions (_when_ attribute) looking for the first [`n-view-prompt`](/components/n-view-prompt) that should be displayed, using the order they are declared. If and when a non-visited [`n-view-prompt`](/components/n-view-prompt) is found, its route is activated and subsequently marked as visited.\n\n[`n-view-prompt`](/components/n-view-prompt) elements each have their own **visit** strategies, but each of them need only return to their parent URL when completed. The parent performs the above evaluation until each child [`n-view-prompt`](/components/n-view-prompt) element has been visited or is excluded by its rule (_when_ attribute).\n\nAt that point, the inner HTML content is finally revealed. Using this convention, you can declaratively create a workflow of pages that must be visited to reach a destination.\n\n",
      "docs": "The View element holds a segment of content visible only when\na URL path matches. It defines a route and its content.\nThis provides the declarative mechanism\nfor in-page content/component routing by URL.",
      "docsTags": [
        {
          "name": "slot",
          "text": "default - The default slot is rendered when this route is\n          activated, visible by default to all routes matching\n          the route URL (typically, child routes)."
        },
        {
          "name": "slot",
          "text": "content - The content route is rendered only when the route\n          matches EXACTLY. Note: This HTML is removed when the\n          route changes."
        },
        {
          "name": "system",
          "text": "routing"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic": "\n```html\n<n-views>\n  <n-view path='/'\n    page-title='Home'\n    transition='fade-in'>\n    ...\n  </n-view>\n  <n-view path='/about'\n    page-title='About Us'\n    scroll-top-offset='20'>\n    ...\n  </n-view>\n</n-views>\n```"
      },
      "props": [
        {
          "name": "contentSrc",
          "type": "string | undefined",
          "mutable": false,
          "attr": "content-src",
          "reflectToAttr": false,
          "docs": "Remote URL for this Route's content.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debug statements for load, update and render events.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "exact",
          "type": "boolean",
          "mutable": false,
          "attr": "exact",
          "reflectToAttr": false,
          "docs": "The path for this route should only be matched\nwhen it is exact.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "Cross Origin Mode if the content is pulled from\na remote location",
          "docsTags": [],
          "default": "'cors'",
          "values": [
            {
              "value": "cors",
              "type": "string"
            },
            {
              "value": "navigate",
              "type": "string"
            },
            {
              "value": "no-cors",
              "type": "string"
            },
            {
              "value": "same-origin",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "noCache",
          "type": "boolean",
          "mutable": false,
          "attr": "no-cache",
          "reflectToAttr": false,
          "docs": "Force render with data & route changes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageDescription",
          "type": "string",
          "mutable": false,
          "attr": "page-description",
          "reflectToAttr": false,
          "docs": "The page description for this view.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageKeywords",
          "type": "string",
          "mutable": false,
          "attr": "page-keywords",
          "reflectToAttr": false,
          "docs": "The keywords to add to the keywords meta-tag for this view.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageRobots",
          "type": "\"all\" | \"nofollow\" | \"noindex\" | \"none\"",
          "mutable": false,
          "attr": "page-robots",
          "reflectToAttr": false,
          "docs": "The robots instruction for search indexing",
          "docsTags": [],
          "default": "'all'",
          "values": [
            {
              "value": "all",
              "type": "string"
            },
            {
              "value": "nofollow",
              "type": "string"
            },
            {
              "value": "noindex",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageTitle",
          "type": "string",
          "mutable": false,
          "attr": "page-title",
          "reflectToAttr": false,
          "docs": "The title for this view. This is prefixed\nbefore the app title configured in n-views",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "path",
          "type": "string",
          "mutable": true,
          "attr": "path",
          "reflectToAttr": true,
          "docs": "The path for this route, including the parent's\nroutes, excluding the router's root.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "resolveTokens",
          "type": "boolean",
          "mutable": false,
          "attr": "resolve-tokens",
          "reflectToAttr": false,
          "docs": "Before rendering remote HTML, replace any data-tokens with their\nresolved values. This also commands this element to\nre-render it's HTML for data-changes. This can affect\nperformance.\n\nIMPORTANT: ONLY WORKS ON REMOTE HTML",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "route",
          "type": "Route",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "Route information",
          "docsTags": [],
          "values": [
            {
              "type": "Route"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "scrollTopOffset",
          "type": "number",
          "mutable": false,
          "attr": "scroll-top-offset",
          "reflectToAttr": false,
          "docs": "Header height or offset for scroll-top on this\nview.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "src",
          "type": "string | undefined",
          "mutable": false,
          "attr": "src",
          "reflectToAttr": false,
          "docs": "Remote URL for this route's HTML. HTML from this\nURL will be not be assigned to any slot.\n\nYou can add slot='content' to any containers\nwithin this HTML if you have a mix of HTML for\nthis exact-route and its children.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "transition",
          "type": "string | undefined",
          "mutable": false,
          "attr": "transition",
          "reflectToAttr": false,
          "docs": "Navigation transition between routes.\nThis is a CSS animation class.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [
        {
          "name": "getChildren",
          "returns": {
            "type": "Promise<{ activators: HTMLNActionActivatorElement[]; views: HTMLNViewElement[]; dos: HTMLNViewPromptElement[]; }>",
            "docs": ""
          },
          "signature": "getChildren() => Promise<{ activators: HTMLNActionActivatorElement[]; views: HTMLNViewElement[]; dos: HTMLNViewPromptElement[]; }>",
          "parameters": [],
          "docs": "Return all child elements used for processing. This function is\nprimarily meant for testing.",
          "docsTags": []
        }
      ],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "content",
          "docs": "The content route is rendered only when the route\n          matches EXACTLY. Note: This HTML is removed when the\n          route changes."
        },
        {
          "name": "default",
          "docs": "The default slot is rendered when this route is\n          activated, visible by default to all routes matching\n          the route URL (typically, child routes)."
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-view-detect/view-detect.tsx",
      "encapsulation": "shadow",
      "tag": "n-view-detect",
      "readme": "# n-view-detect\n\nThis component will conditionally display an 'active' or 'inactive' slot.  \n\nThe default slot is shown when the current route of the app does not match either the supplied `route` or `route-match` properties. Whenever a match is found, the default slot is hidden and the 'active' slot is displayed.\n\n## Basic Usage\n\n```html\n<n-view-detect route='/route' exact>\n  <span slot=\"active\">My route is active!</span>\n  <span slot=\"inactive\">My route is not active!</span>\n</n-view-detect>\n```\n\nThe above example will toggle to the active slot when the app route is exactly `/route` (no children or URL params).\n\n## Regex \n\nUsing the `route-match` property, you can leverage regex to match on multiple paths.\n\n```html\n<n-view-detect route-match=\"^\\/start\\/(?:.*|)?|\\/end|\\/bar$\">\n  <span slot=\"active\">I matched on a condition!</span>\n  <span slot=\"inactive\">None of my route conditions matched!</span>\n<n-view-detect>\n```\n\nThe above example will toggle to the active slot when the app route is a child of start or exactly `/end` or `/bar`.\n",
      "docs": "Hide or show content based on the active route.",
      "docsTags": [
        {
          "name": "slot",
          "text": "active - content to display when route match"
        },
        {
          "name": "slot",
          "text": "inactive - content to display when no route match"
        },
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "exact",
          "type": "boolean",
          "mutable": false,
          "attr": "exact",
          "reflectToAttr": false,
          "docs": "Only active on the exact href match,\nand not on child routes",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "route",
          "type": "string",
          "mutable": true,
          "attr": "route",
          "reflectToAttr": false,
          "docs": "The route that will toggle the active slot of this component",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "routeMatch",
          "type": "(string | RegExp)[] | RegExp | string | undefined",
          "mutable": true,
          "attr": "route-match",
          "reflectToAttr": false,
          "docs": "Optional Regex value to route match on",
          "docsTags": [],
          "values": [
            {
              "type": "(string"
            },
            {
              "type": "RegExp)[]"
            },
            {
              "type": "RegExp"
            },
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "strict",
          "type": "boolean",
          "mutable": false,
          "attr": "strict",
          "reflectToAttr": false,
          "docs": "Only active on the exact href match\nusing every aspect of the URL including\nparameters.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [
        {
          "name": "active",
          "docs": "content to display when route match"
        },
        {
          "name": "inactive",
          "docs": "content to display when no route match"
        }
      ],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-view-link/view-link.tsx",
      "encapsulation": "none",
      "tag": "n-view-link",
      "readme": "# N-VIEW-LINK\n\nThe element should be used in place of an `a` tag to navigate without refreshing the page. This element supports an active-class that will be applied when the route in `href` matches the route of the app. This is helpful for menus, bread-crumbs, and tabs.\n\n\n",
      "docs": "The element should be used in-place of an `a` tag to navigate without\nrefreshing the page. This element supports an active-class that will\nbe applied when the route in **href** matches the route of the app.\n\nThis is helpful for displaying active routes in menus, bread-crumbs and tabs.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {
        "menu": "When used in a menu or navigation system, you can leverage the active-class that is added when the href-route is active.\n\n```html\n<n-view-link path='/route' active-class='my-active-class'> ... </n-view-link>\n```",
        "view": "To create a link to a route, simply use the route in the `href` attribute.\n\n```html\n<n-view-link path='/route'> ... </n-view-link>\n```"
      },
      "props": [
        {
          "name": "activeClass",
          "type": "string",
          "mutable": false,
          "attr": "active-class",
          "reflectToAttr": false,
          "docs": "The class to add when the matching route is active\nin the browser",
          "docsTags": [],
          "default": "'active'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Provide log messages for path matching.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "exact",
          "type": "boolean",
          "mutable": false,
          "attr": "exact",
          "reflectToAttr": false,
          "docs": "Only active on the exact href match,\nand not on child routes",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "linkClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "link-class",
          "reflectToAttr": false,
          "docs": "The class to add to the anchor tag.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "path",
          "type": "string",
          "mutable": true,
          "attr": "path",
          "reflectToAttr": false,
          "docs": "The destination route for this link",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "strict",
          "type": "boolean",
          "mutable": false,
          "attr": "strict",
          "reflectToAttr": false,
          "docs": "Only active on the exact href match\nusing every aspect of the URL including\nparameters.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "validate",
          "type": "boolean",
          "mutable": false,
          "attr": "validate",
          "reflectToAttr": true,
          "docs": "Validates any current-route inputs before navigating. Disables\nnavigation if any inputs are invalid.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [
        "n-view-link-back",
        "n-view-link-list",
        "n-view-link-next"
      ],
      "dependencies": [],
      "dependencyGraph": {
        "n-view-link-back": [
          "n-view-link"
        ],
        "n-view-link-list": [
          "n-view-link"
        ],
        "n-view-link-next": [
          "n-view-link"
        ]
      }
    },
    {
      "filePath": "./src/components/n-view-link-back/view-link-back.tsx",
      "encapsulation": "none",
      "tag": "n-view-link-back",
      "readme": "# N-VIEW-LINK-BACK\n\nThis component automatically links to the previous route, as defined in the HTML. It first goes to the previous sibling route. If none, then it links to the parent route.\n\n\n",
      "docs": "This component automatically links to the previous route, as defined in the HTML. It first goes to the previous sibling route. If none, then it links to the parent route.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {
        "auto": "\nThe link will automatically contain the page title as text, if none is specified and the route as a title.\n\n```html\n<n-view-link-back>\n</n-view-link-back>\n```",
        "wrapped": "\nThe link will wrap whatever HTML you include between the tags.\n\n```html\n<n-view-link-back>\n    <icon/> Back\n</n-view-link-back>\n```"
      },
      "props": [
        {
          "name": "linkClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "link-class",
          "reflectToAttr": false,
          "docs": "The class to add to the anchor tag.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "text",
          "type": "string | undefined",
          "mutable": false,
          "attr": "text",
          "reflectToAttr": false,
          "docs": "The link text",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "n-view-link"
      ],
      "dependencyGraph": {
        "n-view-link-back": [
          "n-view-link"
        ]
      }
    },
    {
      "filePath": "./src/components/n-view-link-list/view-link-list.tsx",
      "encapsulation": "none",
      "tag": "n-view-link-list",
      "readme": "# N-VIEW-LINK-LIST\n\nThis component automatically lists out known routes using the current-route as the main context.\n\n\nThis makes it easy to list child-routes programmatically, versus hard-coded links for a variety of uses.\n\n",
      "docs": "Display a list of routes related to the current route.\nModes:\n**siblings**: all routes at the same depth level (nav)\n**parents**: all parent routes. (breadcrumbs)\n**children**: all child routes within a hierarchy. (sub-menu)",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {
        "breadcrumbs": "A breadcrumb menu that displays the current route and it parent routes.\n\n```html\n<nav aria-label=\"breadcrumb\"\n  class=\"bread-nav container text-end\">\n  <n-view-link-list class=\"\" mode=\"parents\"\n    list-class=\"breadcrumb justify-content-start\"\n    active-class=\"active\"\n    item-class=\"breadcrumb-item\"\n    exclude-root>\n  </n-view-link-list>\n</nav>\n```",
        "menu": "\nA menu that displays the current routes sibling routes.\n\n```html\n\n<n-view-link-list mode=\"siblings\">\n</n-view-link-list>\n```",
        "submenu": "\nA menu that displays the current route's child routes.\n\n```html\n<n-view-link-list mode=\"children\">\n</n-view-link-list>\n```"
      },
      "props": [
        {
          "name": "activeClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "active-class",
          "reflectToAttr": false,
          "docs": "The active-class to use with the n-view-link elements.",
          "docsTags": [],
          "default": "'active'",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "excludeRoot",
          "type": "boolean",
          "mutable": false,
          "attr": "exclude-root",
          "reflectToAttr": false,
          "docs": "Specify if the '/' route should\nbe skipped in the list.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "itemClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "item-class",
          "reflectToAttr": false,
          "docs": "The list-item-class to use with the li tag",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "linkClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "link-class",
          "reflectToAttr": false,
          "docs": "The class to add to the anchor tag.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "listClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "list-class",
          "reflectToAttr": false,
          "docs": "The list-class to use with the UL tag",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"children\" | \"parents\" | \"siblings\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "The display mode for which routes to display.",
          "docsTags": [],
          "default": "'parents'",
          "values": [
            {
              "value": "children",
              "type": "string"
            },
            {
              "value": "parents",
              "type": "string"
            },
            {
              "value": "siblings",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "n-view-link"
      ],
      "dependencyGraph": {
        "n-view-link-list": [
          "n-view-link"
        ]
      }
    },
    {
      "filePath": "./src/components/n-view-link-next/view-link-next.tsx",
      "encapsulation": "none",
      "tag": "n-view-link-next",
      "readme": "# N-VIEW-LINK-NEXT\n\nThis component automatically links to the next route, as defined in the HTML. It first goes to the next sibling route. If none, then it links to the parent route.\n",
      "docs": "This element will automatically go to the next\nview in the view.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {
        "auto": "\nThe link will automatically contain the page title as text, if none is specified and the route as a title.\n\n```html\n<n-view-link-next>\n</n-view-link-next>\n```",
        "wrapped": "\nThe link will wrap whatever HTML you include between the tags.\n\n```html\n<n-view-link-next>\n    <icon/> Next\n</n-view-link-next>\n```"
      },
      "props": [
        {
          "name": "linkClass",
          "type": "string | undefined",
          "mutable": false,
          "attr": "link-class",
          "reflectToAttr": false,
          "docs": "The class to add to the anchor tag.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "text",
          "type": "string | undefined",
          "mutable": false,
          "attr": "text",
          "reflectToAttr": false,
          "docs": "The link text",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [
        "n-view-link"
      ],
      "dependencyGraph": {
        "n-view-link-next": [
          "n-view-link"
        ]
      }
    },
    {
      "filePath": "./src/components/n-view-not-found/view-not-found.tsx",
      "encapsulation": "shadow",
      "tag": "n-view-not-found",
      "readme": "# N-VIEW-NOT-FOUND\n\nThe `<n-view-not-found>` element should be placed at the end of the content,\ninside the n-views element. It shows up when no views\nabove it resolve.\n\n## Usage\n\nUsing the `<n-view-not-found>` element.\n\n```html\n<n-views>\n  ... all other views ...\n  <n-view-not-found ...>\n    <h2>Not Found.</h2>\n  </n-view-not-found>\n</n-views>\n```\n",
      "docs": "This element should be placed at the end of the content,\ninside the n-views element. It shows up when no views\nabove it resolve.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        }
      ],
      "usage": {
        "basic": ""
      },
      "props": [
        {
          "name": "pageTitle",
          "type": "string",
          "mutable": false,
          "attr": "page-title",
          "reflectToAttr": false,
          "docs": "The title for this view. This is prefixed\nbefore the app title configured in n-views",
          "docsTags": [],
          "default": "'Not Found'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollTopOffset",
          "type": "number",
          "mutable": false,
          "attr": "scroll-top-offset",
          "reflectToAttr": false,
          "docs": "Header height or offset for scroll-top on this\nview.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "transition",
          "type": "string | undefined",
          "mutable": true,
          "attr": "transition",
          "reflectToAttr": false,
          "docs": "Navigation transition between routes.\nThis is a CSS animation class.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-view-prompt/view-prompt.tsx",
      "encapsulation": "shadow",
      "tag": "n-view-prompt",
      "readme": "# N-VIEW-PROMPT\n\nThe [`n-view-prompt`](/components/n-view-prompt) element represents a specialized child-route that can force a prompt before the parent route is displayed.\n\n> ℹ️ Note: [`n-view-prompt`](/components/n-view-prompt) can be used to capture data, agree to terms or anything else the parent route may need.\n\nThey are used to create presentations, wizards, input workflows, or step-by-step instructions.\n\n\n### How it works\n\nWhen the parent [`n-view`](/components/n-view)'s route is activated, before rendering, it:\n\n1. Lists all direct-child [`n-view-prompt`](/components/n-view-prompt) items, one at a time in sequence.\n2. Finds the first unvisited route respecting the **'visit'** requirement or [**'when'** predicate](/expression), if present.\n\n   - **If found**: It pushes the page state to its URL, thus activated the child route.\n   - **Otherwise**: The [`n-view`](/components/n-view) is satisfied and can now render its own contents.\n\n## Samples\n\nThe following are some examples to demonstrate how you can combine the settings to create robust workflows.\n\n### Present Once\n\nThis route will be activated once for each new visit to the page. (Visit 'once' is the default behavior, so it can be omitted.)\n\n```html\n<n-view-prompt path='/accept-terms' \n  page-title='Consent' \n  visit='once'>\n  ...\n</n-view-prompt>\n```\n\n> ℹ️ Note: By default, the visit strategy is 'once'. In this case, the visit is stored in the local storage. Any subsequent visits to this page with the same browser won't see it again.\n\n### Present Each Visit\n\nThis route will be activated once for each new session visit to the page.\n\n```html\n<n-view-prompt\n  path='/accept-terms'\n  page-title='Consent'\n  visit='always'\n>\n  ...\n</n-view-prompt>\n```\n\n> ℹ️ Note: For **'always'**, the visit is stored in local-session which is destroyed when the browser tab is closed, but retained while on the site.\n\n### Collect Required Data\n\nThis route will be activated if a value for 'consent' was not found in local-storage[^1].\n\n```html\n<n-view-prompt\n  path='/accept-terms'\n  page-title='Consent'\n  when='!{{storage:consent}}'\n>\n  ...\n</n-view-prompt>\n```\n\n> **Important**: If a value for `{{storage:consent}}` is not set in this route's somehow, the user cannot get to the parent page.\n\nThis data can be set manually or using our specialized declarative elements to update data. See [actions](/actions) for more info.\n\n[^1]: Check out the [data system](/data) for info to use external data.\n\n### Optional\n\nThis route will be activated only through navigation. This is helpful for opt-in presentations, modals or other action-based content.\n\n```html\n<n-view-prompt\n  path='/learn-more'\n  page-title='Watch a video'\n  visit='optional'\n>\n  ...\n</n-view-prompt>\n```\n\n### Routing & Guided Navigation\n\nThis evaluation has to take place before the route is activated as the underlying data can change in the previous Do elements. If the element is deemed unnecessary (the predicate returns false), the element marks itself ‘complete’ and returns control to the parent view, without revealing its contents.\n\n\n",
      "docs": "This element represents a specialized child-route for a parent \\<n-view\\> element.\nIt represents a sub-route that has required and workflow behaviors.\n\nThey are used to create, wizards, input workflows, or step by step instructions or\nwherever you want guided or automatic navigation.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        },
        {
          "name": "extension",
          "text": "data"
        },
        {
          "name": "extension",
          "text": "elements"
        }
      ],
      "usage": {
        "basic": "\nMuch like its parent, [`n-view`](/components/n-view), basic routing information is required.\n\n```html\n<n-view ...>\n  <n-view-prompt\n    path='<sub-path>'\n    page-title='<route title>'\n    visit='always|once|optional'\n    when='<expression predicate>'\n    src='<remote html with route sand children>'\n    content-src='<remote content html>'\n    transition='<animation-enter>'\n    scroll-top-offset=''\n  >\n    ...\n  </n-view-prompt>\n  ...\n</n-view>\n```\n\n> ℹ️ Note: The **when** attribute is a data expression that overrides the **visit** strategy. It is a predicate that produces a boolean result. **true: visit=always** false: visit=optional"
      },
      "props": [
        {
          "name": "contentSrc",
          "type": "string | undefined",
          "mutable": false,
          "attr": "content-src",
          "reflectToAttr": false,
          "docs": "Remote URL for HTML content. Content from this\nURL will be assigned the 'content' slot.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "To debug timed elements, set this value to true.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "exact",
          "type": "boolean",
          "mutable": false,
          "attr": "exact",
          "reflectToAttr": false,
          "docs": "The url for this route should only be matched\nwhen it is exact.",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "mode",
          "type": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
          "mutable": false,
          "attr": "mode",
          "reflectToAttr": false,
          "docs": "Cross Origin Mode if the content is pulled from\na remote location",
          "docsTags": [],
          "default": "'cors'",
          "values": [
            {
              "value": "cors",
              "type": "string"
            },
            {
              "value": "navigate",
              "type": "string"
            },
            {
              "value": "no-cors",
              "type": "string"
            },
            {
              "value": "same-origin",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "noCache",
          "type": "boolean",
          "mutable": false,
          "attr": "no-cache",
          "reflectToAttr": false,
          "docs": "Force render with data & route changes.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageDescription",
          "type": "string",
          "mutable": false,
          "attr": "page-description",
          "reflectToAttr": false,
          "docs": "The page description for this view.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageKeywords",
          "type": "string",
          "mutable": false,
          "attr": "page-keywords",
          "reflectToAttr": false,
          "docs": "The keywords to add to the keywords meta-tag for this view.",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageRobots",
          "type": "\"all\" | \"nofollow\" | \"noindex\" | \"none\"",
          "mutable": false,
          "attr": "page-robots",
          "reflectToAttr": false,
          "docs": "The robots instruction for search indexing",
          "docsTags": [],
          "default": "'none'",
          "values": [
            {
              "value": "all",
              "type": "string"
            },
            {
              "value": "nofollow",
              "type": "string"
            },
            {
              "value": "noindex",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "pageTitle",
          "type": "string",
          "mutable": false,
          "attr": "page-title",
          "reflectToAttr": false,
          "docs": "The title for this view. This is prefixed\nbefore the app title configured in n-views",
          "docsTags": [],
          "default": "''",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "path",
          "type": "string",
          "mutable": true,
          "attr": "path",
          "reflectToAttr": true,
          "docs": "The path for this prompt route, including the parent's\nroutes, excluding the router's root.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "resolveTokens",
          "type": "boolean",
          "mutable": false,
          "attr": "resolve-tokens",
          "reflectToAttr": false,
          "docs": "Before rendering remote HTML, replace any data-tokens with their\nresolved values. This also commands this component to\nre-render it's HTML for data-changes. This can affect\nperformance.\n\nIMPORTANT: ONLY WORKS ON REMOTE HTML",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "route",
          "type": "Route",
          "mutable": true,
          "reflectToAttr": false,
          "docs": "Route information",
          "docsTags": [],
          "values": [
            {
              "type": "Route"
            }
          ],
          "optional": false,
          "required": true
        },
        {
          "name": "scrollTopOffset",
          "type": "number | undefined",
          "mutable": false,
          "attr": "scroll-top-offset",
          "reflectToAttr": false,
          "docs": "Header height or offset for scroll-top on this\nview.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "transition",
          "type": "string | undefined",
          "mutable": false,
          "attr": "transition",
          "reflectToAttr": false,
          "docs": "Navigation transition between routes.\nThis is a CSS animation class.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "visit",
          "type": "\"always\" | \"once\" | \"optional\"",
          "mutable": false,
          "attr": "visit",
          "reflectToAttr": false,
          "docs": "The visit strategy for this do.\nonce: persist the visit and never force it again\nalways: do not persist, but don't don't show again in-session\noptional: do not force this view-do ever. It will be available by URL",
          "docsTags": [],
          "default": "'once'",
          "values": [
            {
              "value": "always",
              "type": "string"
            },
            {
              "value": "once",
              "type": "string"
            },
            {
              "value": "optional",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "when",
          "type": "string | undefined",
          "mutable": false,
          "attr": "when",
          "reflectToAttr": false,
          "docs": "If present, the expression must\nevaluate to true for this route\nto be sequenced by the parent view.\nThe existence of this value overrides\nthe visit strategy",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    },
    {
      "filePath": "./src/components/n-views/views.tsx",
      "encapsulation": "none",
      "tag": "n-views",
      "readme": "# N-VIEWS\n\nThe root element is the base container for the view-engine and its child elements. This element should contain root-level HTML that is global to every view along with [`n-view`](/components/n-view) elements placed within any global HTML.\n\n\nThis element is the root container for all routing. It provides an entry-point for the content-routing.\n\nFor more routing information, check out the [routing](/routing) documentation. \n",
      "docs": "The root element is the base container for the view-engine and its\nchild elements. This element should contain root-level HTML that\nis global to every view along with \\<n-view\\>\nelements placed within any global-html.",
      "docsTags": [
        {
          "name": "system",
          "text": "routing"
        },
        {
          "name": "extension",
          "text": "actions"
        },
        {
          "name": "extension",
          "text": "elements"
        },
        {
          "name": "extension",
          "text": "provider"
        }
      ],
      "usage": {
        "basic": "\n```html\n<n-views>\n  ...\n  <n-view ...></n-view>\n  <n-view ...></n-view>\n  ...\n</n-views>\n```",
        "complex": "\nThe example sets an offset for scrolling, a global page transition and has a non-default start page.\n\n```html\n<n-views \n  scroll-top-offset='0' \n  transition='fade-in' \n  start-path='/home' \n  >\n  ...\n  <n-view ...></n-view>\n  <n-view ...></n-view>\n  ...\n</n-views>\n```"
      },
      "props": [
        {
          "name": "debug",
          "type": "boolean",
          "mutable": false,
          "attr": "debug",
          "reflectToAttr": false,
          "docs": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems.",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "notFound",
          "type": "boolean",
          "mutable": false,
          "attr": "not-found",
          "reflectToAttr": false,
          "docs": "Enable the not-found display.\nTo customize it, use:\nslot=\"not-found\"",
          "docsTags": [],
          "default": "false",
          "values": [
            {
              "type": "boolean"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "root",
          "type": "string",
          "mutable": false,
          "attr": "root",
          "reflectToAttr": false,
          "docs": "This is the root path that the actual page is,\nif it isn't '/', then the router needs to know\nwhere to begin creating paths.",
          "docsTags": [],
          "default": "'/'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "scrollTopOffset",
          "type": "number | undefined",
          "mutable": false,
          "attr": "scroll-top-offset",
          "reflectToAttr": false,
          "docs": "Header height or offset for scroll-top on this\nand all views.",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "startDelay",
          "type": "number",
          "mutable": false,
          "attr": "start-delay",
          "reflectToAttr": false,
          "docs": "Delay redirecting to the start path by\nthis value in seconds.",
          "docsTags": [],
          "default": "0",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false
        },
        {
          "name": "startPath",
          "type": "string | undefined",
          "mutable": false,
          "attr": "start-path",
          "reflectToAttr": false,
          "docs": "This is the start path a user should\nland on when they first land on this app.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        },
        {
          "name": "transition",
          "type": "string | undefined",
          "mutable": false,
          "attr": "transition",
          "reflectToAttr": false,
          "docs": "Navigation transition between routes.\nThis is a CSS animation class.",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "listeners": [],
      "styles": [],
      "slots": [],
      "parts": [],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    }
  ],
  "version": "0.10.8"
}