{
  "meta": {
    "generated_from": [
      "catalog.json",
      "components/*/*.stories.ts",
      "components/*/*.ts",
      "a2ui/examples/*.json",
      "a2ui/patterns/*.json",
      "graphify-out/graph.json"
    ],
    "catalog_id": "cre8-wc",
    "library": "@tmorrow/cre8-wc",
    "library_version": "2.3.6",
    "graphify_commit": "735ed2c2ff3caf037f8faf1b71e1ccdb85d80cae",
    "evidence": {
      "story_files": 72,
      "source_files": 88,
      "example_files": [
        "card-gallery.json",
        "compound-families.json",
        "dating-grid.json",
        "llm-observability.json",
        "portfolio.json"
      ],
      "pattern_files": [
        "alert-banner.json",
        "data-table.json",
        "login-form.json",
        "modal-dialog.json",
        "page-layout.json",
        "tabbed-content.json"
      ]
    },
    "total_nodes": 232,
    "total_edges": 517,
    "contains_edges": 111
  },
  "nodes": [
    {
      "id": "cat:Actions",
      "type": "category",
      "label": "Actions"
    },
    {
      "id": "cat:Data",
      "type": "category",
      "label": "Data"
    },
    {
      "id": "cat:Disclosure",
      "type": "category",
      "label": "Disclosure"
    },
    {
      "id": "cat:Feedback",
      "type": "category",
      "label": "Feedback"
    },
    {
      "id": "cat:Forms",
      "type": "category",
      "label": "Forms"
    },
    {
      "id": "cat:Layout",
      "type": "category",
      "label": "Layout"
    },
    {
      "id": "cat:Marketing",
      "type": "category",
      "label": "Marketing"
    },
    {
      "id": "cat:Media",
      "type": "category",
      "label": "Media"
    },
    {
      "id": "cat:Navigation",
      "type": "category",
      "label": "Navigation"
    },
    {
      "id": "cat:Typography",
      "type": "category",
      "label": "Typography"
    },
    {
      "id": "cre8-button",
      "type": "component",
      "category": "Actions",
      "description": "The size and state of buttons on the screen serve as visual cues for the user about what they can do and what they shoul…",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The button text. Should be as short and simple as possible, ideally a maximum of…",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "primary",
            "secondary",
            "tertiary"
          ],
          "default": "primary",
          "description": "Style variant - **primary** renders the button used for primary actions. Present…",
          "x-kind": "attribute"
        },
        "neutral": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "This property is for a neutral button propery mainly used for the secondary or t…",
          "x-kind": "attribute"
        },
        "inverse": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverse attribute",
          "x-kind": "attribute"
        },
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Provide this property if you intend to use button styles for an anchor tag (`<a>…",
          "x-kind": "attribute"
        },
        "target": {
          "type": "string",
          "enum": [
            "_blank",
            "_self",
            "_parent",
            "_top"
          ],
          "default": null,
          "description": "Target attribute for a link if providing `href` to style a link as a button - **…",
          "x-kind": "attribute"
        },
        "rel": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Rel if this is an <a> element - this swaps <button> for <a>",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "svg as a raw string - For button with icon, the icon is defined by this prop. - …",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "sm",
            "lg",
            "md"
          ],
          "default": "md",
          "description": "Size variants add another way to increase or decrease visual priority of a butto…",
          "x-kind": "attribute"
        },
        "loading": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "* Changes styling to an active state with a spinning icon. * Adds accessibility …",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": [
            "button",
            "submit",
            "reset"
          ],
          "default": "button",
          "description": "Type of button. - **button** (default) button has no default behavior and does n…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled attribute",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is required",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Deprecated: iconName, use svg instead Icon name if including an icon within a bu…",
          "x-kind": "property"
        },
        "iconRotateDegree": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "iconRotateDegree is used for <cre8-icon> to set the arrow in the correct directi…",
          "x-kind": "property"
        },
        "iconFlipDirection": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "iconFlipDirection is used for <cre8-icon> to set the icon in the correct directi…",
          "x-kind": "property"
        },
        "iconPosition": {
          "type": "string",
          "enum": [
            "before",
            "after"
          ],
          "default": "undefined",
          "description": "Icon position. Must include the name of the icon with `iconName` - **before** pl…",
          "x-kind": "property"
        },
        "hideText": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Visually hide button text. Text is still accessible to assistive technology. Use…",
          "x-kind": "property"
        },
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full width button",
          "x-kind": "property"
        },
        "loadingComplete": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "* Variant of the loading button that: * Removes loading spinner * Informs the SR…",
          "x-kind": "property"
        },
        "ariaLive": {
          "type": "string",
          "enum": [
            "polite",
            "assertive"
          ],
          "default": "assertive",
          "description": "Controls whether your loading status update to voiceover users will occur immedi…",
          "x-kind": "property"
        },
        "splitButtonType": {
          "type": "string",
          "enum": [
            "text",
            "caret"
          ],
          "default": null,
          "description": "These two subvariants of the split button style the two seperate buttons to styl…",
          "x-kind": "property"
        },
        "buttonAriaExpanded": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Button aria expanded attribute",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in a success state",
          "x-kind": "property"
        }
      },
      "slots": [
        "before",
        "after"
      ],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[1].children[0].children[0].children[0].slots.footer[0].children[0]",
        "spec": {
          "component": "cre8-button",
          "props": {
            "text": "$249",
            "variant": "secondary",
            "size": "sm"
          }
        }
      }
    },
    {
      "id": "slot:cre8-button:before",
      "type": "slot",
      "name": "before",
      "component": "cre8-button",
      "description": "Content rendered before the button text, such as an icon"
    },
    {
      "id": "slot:cre8-button:after",
      "type": "slot",
      "name": "after",
      "component": "cre8-button",
      "description": "Content rendered after the button text, such as an icon"
    },
    {
      "id": "prop:cre8-button:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-button",
      "enum": [
        "primary",
        "secondary",
        "tertiary"
      ],
      "description": "Style variant - **primary** renders the button used for primary actions. Present…"
    },
    {
      "id": "prop:cre8-button:target",
      "type": "enum_prop",
      "name": "target",
      "component": "cre8-button",
      "enum": [
        "_blank",
        "_self",
        "_parent",
        "_top"
      ],
      "description": "Target attribute for a link if providing `href` to style a link as a button - **…"
    },
    {
      "id": "prop:cre8-button:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-button",
      "enum": [
        "sm",
        "lg",
        "md"
      ],
      "description": "Size variants add another way to increase or decrease visual priority of a butto…"
    },
    {
      "id": "prop:cre8-button:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-button",
      "enum": [
        "button",
        "submit",
        "reset"
      ],
      "description": "Type of button. - **button** (default) button has no default behavior and does n…"
    },
    {
      "id": "prop:cre8-button:iconPosition",
      "type": "enum_prop",
      "name": "iconPosition",
      "component": "cre8-button",
      "enum": [
        "before",
        "after"
      ],
      "description": "Icon position. Must include the name of the icon with `iconName` - **before** pl…"
    },
    {
      "id": "prop:cre8-button:ariaLive",
      "type": "enum_prop",
      "name": "ariaLive",
      "component": "cre8-button",
      "enum": [
        "polite",
        "assertive"
      ],
      "description": "Controls whether your loading status update to voiceover users will occur immedi…"
    },
    {
      "id": "prop:cre8-button:splitButtonType",
      "type": "enum_prop",
      "name": "splitButtonType",
      "component": "cre8-button",
      "enum": [
        "text",
        "caret"
      ],
      "description": "These two subvariants of the split button style the two seperate buttons to styl…"
    },
    {
      "id": "cre8-button-group",
      "type": "component",
      "category": "Actions",
      "description": "Button Group component.",
      "props": {
        "orientation": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Responsive Button Group (for modals)",
          "x-kind": "attribute"
        },
        "gap": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Gap between buttons - **sm** reduces gap to 8px (useful in compact contexts)",
          "x-kind": "attribute"
        },
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Stretch button group to fill its container width",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[1].children[0].children[0].children[0].slots.footer[0]",
        "spec": {
          "component": "cre8-button-group",
          "children": [
            {
              "component": "cre8-button",
              "props": {
                "text": "$249",
                "variant": "secondary",
                "size": "sm"
              }
            },
            {
              "component": "cre8-button",
              "props": {
                "text": "Add",
                "variant": "primary",
                "size": "sm"
              },
              "events": {
                "click": "add-to-cart:minimalist-watch"
              }
            }
          ],
          "props": {
            "fullWidth": true,
            "gap": "sm"
          }
        }
      }
    },
    {
      "id": "cre8-danger-button",
      "type": "component",
      "category": "Actions",
      "description": "The size and state of buttons on the screen serve as visual cues for the user about what they can do and what they shoul…",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": "Button",
          "description": "The button text. Should be as short and simple as possible, ideally a maximum of…",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "primary",
            "secondary",
            "tertiary"
          ],
          "default": "primary",
          "description": "Style variant - **primary** renders the button used for primary actions. Present…",
          "x-kind": "attribute"
        },
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Provide this property if you intend to use button styles for an anchor tag (`<a>…",
          "x-kind": "attribute"
        },
        "target": {
          "type": "string",
          "enum": [
            "_blank",
            "_self",
            "_parent",
            "_top"
          ],
          "default": null,
          "description": "Target attribute for a link if providing `href` to style a link as a button - **…",
          "x-kind": "attribute"
        },
        "rel": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Rel if this is an <a> element - this swaps <button> for <a>",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "SVG raw string if including an icon within a button. Must include the icon's pos…",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "sm",
            "lg"
          ],
          "default": null,
          "description": "Size variants add another way to increase or decrease visual priority of a butto…",
          "x-kind": "attribute"
        },
        "loading": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "* Changes styling to an active state with a spinning icon. * Adds accessibility …",
          "x-kind": "attribute"
        },
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted colors Danger Button (onDark)",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": [
            "button",
            "submit",
            "reset"
          ],
          "default": "button",
          "description": "Type of button. - **button** (default) button has no default behavior and does n…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled attribute",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is required",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "iconRotateDegree": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "rotate is used for <cre8-icon> to set the arrow in the correct direction",
          "x-kind": "property"
        },
        "iconFlipDirection": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "flip is used for <cre8-icon> to set the icon in the correct direction",
          "x-kind": "property"
        },
        "iconPosition": {
          "type": "string",
          "enum": [
            "before",
            "after"
          ],
          "default": "undefined",
          "description": "Icon position. Must include the name of the icon with `iconName` - **before** pl…",
          "x-kind": "property"
        },
        "hideText": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Visually hide button text. Text is still accessible to assistive technology. Use…",
          "x-kind": "property"
        },
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full width button",
          "x-kind": "property"
        },
        "loadingComplete": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "* Variant of the loading button that: * Removes loading spinner * Informs the SR…",
          "x-kind": "property"
        },
        "ariaLive": {
          "type": "string",
          "enum": [
            "polite",
            "assertive"
          ],
          "default": "assertive",
          "description": "Controls whether your loading status update to voiceover users will occur immedi…",
          "x-kind": "property"
        },
        "buttonAriaExpanded": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Button aria expanded attribute",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in a success state",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": null
    },
    {
      "id": "prop:cre8-danger-button:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-danger-button",
      "enum": [
        "primary",
        "secondary",
        "tertiary"
      ],
      "description": "Style variant - **primary** renders the button used for primary actions. Present…"
    },
    {
      "id": "prop:cre8-danger-button:target",
      "type": "enum_prop",
      "name": "target",
      "component": "cre8-danger-button",
      "enum": [
        "_blank",
        "_self",
        "_parent",
        "_top"
      ],
      "description": "Target attribute for a link if providing `href` to style a link as a button - **…"
    },
    {
      "id": "prop:cre8-danger-button:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-danger-button",
      "enum": [
        "sm",
        "lg"
      ],
      "description": "Size variants add another way to increase or decrease visual priority of a butto…"
    },
    {
      "id": "prop:cre8-danger-button:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-danger-button",
      "enum": [
        "button",
        "submit",
        "reset"
      ],
      "description": "Type of button. - **button** (default) button has no default behavior and does n…"
    },
    {
      "id": "prop:cre8-danger-button:iconPosition",
      "type": "enum_prop",
      "name": "iconPosition",
      "component": "cre8-danger-button",
      "enum": [
        "before",
        "after"
      ],
      "description": "Icon position. Must include the name of the icon with `iconName` - **before** pl…"
    },
    {
      "id": "prop:cre8-danger-button:ariaLive",
      "type": "enum_prop",
      "name": "ariaLive",
      "component": "cre8-danger-button",
      "enum": [
        "polite",
        "assertive"
      ],
      "description": "Controls whether your loading status update to voiceover users will occur immedi…"
    },
    {
      "id": "cre8-split-button",
      "type": "component",
      "category": "Actions",
      "description": "Split Button component.",
      "props": {
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disables both the main button and the dropdown toggle.",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "sm",
            "lg"
          ],
          "default": null,
          "description": "Size variant <cre8-text-passage size=\"sm\"> <ul> <li>**sm** shrinks the button ty…",
          "x-kind": "attribute"
        },
        "buttonText": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Display text on the button",
          "x-kind": "property"
        },
        "dropdownOpen": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-split-button:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-split-button",
      "enum": [
        "sm",
        "lg"
      ],
      "description": "Size variant <cre8-text-passage size=\"sm\"> <ul> <li>**sm** shrinks the button ty…"
    },
    {
      "id": "cre8-chart",
      "type": "component",
      "category": "Data",
      "description": "A flexible chart component built on Chart.js that supports multiple chart types including line, bar, pie, doughnut, rada…",
      "props": {
        "type": {
          "type": "string",
          "enum": [
            "line",
            "bar",
            "pie",
            "doughnut",
            "radar",
            "polarArea",
            "bubble",
            "scatter"
          ],
          "default": "bar",
          "description": "The type of chart to render.",
          "x-kind": "attribute"
        },
        "width": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Width of the chart container in pixels. If not set, the chart will be responsive…",
          "x-kind": "attribute"
        },
        "height": {
          "type": "number",
          "enum": null,
          "default": 400,
          "description": "Height of the chart container in pixels. If not set, defaults to 400px.",
          "x-kind": "attribute"
        },
        "maintain-aspect-ratio": {
          "type": "boolean",
          "enum": null,
          "default": true,
          "description": "Whether the chart should maintain aspect ratio when resizing.",
          "x-kind": "attribute"
        },
        "responsive": {
          "type": "boolean",
          "enum": null,
          "default": true,
          "description": "Whether the chart should be responsive to container size.",
          "x-kind": "attribute"
        },
        "loading": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "Display a loading indicator instead of the chart.",
          "x-kind": "attribute"
        },
        "aria-label": {
          "type": "string",
          "enum": null,
          "default": "Chart",
          "description": "Accessible label for the chart.",
          "x-kind": "attribute"
        },
        "show-legend": {
          "type": "boolean",
          "enum": null,
          "default": true,
          "description": "Whether to show the legend.",
          "x-kind": "attribute"
        },
        "legend-position": {
          "type": "string",
          "enum": [
            "top",
            "bottom",
            "left",
            "right"
          ],
          "default": "top",
          "description": "Position of the legend.",
          "x-kind": "attribute"
        },
        "enable-animation": {
          "type": "boolean",
          "enum": null,
          "default": true,
          "description": "Whether to animate chart updates.",
          "x-kind": "attribute"
        },
        "animation-duration": {
          "type": "number",
          "enum": null,
          "default": 750,
          "description": "Animation duration in milliseconds.",
          "x-kind": "attribute"
        },
        "data": {
          "type": "object",
          "enum": null,
          "default": null,
          "description": "The chart data including labels and datasets. This should be an object with `lab…",
          "x-kind": "property"
        },
        "options": {
          "type": "object",
          "enum": null,
          "default": null,
          "description": "Chart.js configuration options. See Chart.js documentation for all available opt…",
          "x-kind": "property"
        },
        "colors": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Default colors for datasets (uses cre8 design token colors).",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[0].children[0].children[0].children[0].slots.default[0]",
        "spec": {
          "component": "cre8-chart",
          "props": {
            "type": "line",
            "height": 220,
            "aria-label": "Request volume over the last 24 hours",
            "show-legend": false,
            "data": {
              "labels": [
                "00h",
                "01h",
                "02h",
                "03h",
                "04h",
                "05h",
                "06h",
                "07h",
                "08h",
                "09h",
                "10h",
                "11h",
                "12h",
                "13h",
                "14h",
                "15h",
                "16h",
                "17h",
                "18h",
                "19h",
                "20h",
                "21h",
                "22h",
                "23h"
              ],
              "datasets": [
                {
                  "label": "Requests",
                  "data": [
                    45,
                    32,
                    28,
                    22,
                    18,
                    15,
                    24,
                    67,
                    145,
                    198,
                    234,
                    287,
                    312,
                    298,
                    267,
                    243,
                    289,
                    334,
                    298,
                    254,
                    187,
                    143,
                    98,
                    67
                  ],
                  "fill": true,
                  "tension": 0.4
                }
              ]
            }
          }
        }
      }
    },
    {
      "id": "prop:cre8-chart:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-chart",
      "enum": [
        "line",
        "bar",
        "pie",
        "doughnut",
        "radar",
        "polarArea",
        "bubble",
        "scatter"
      ],
      "description": "The type of chart to render."
    },
    {
      "id": "prop:cre8-chart:legend-position",
      "type": "enum_prop",
      "name": "legend-position",
      "component": "cre8-chart",
      "enum": [
        "top",
        "bottom",
        "left",
        "right"
      ],
      "description": "Position of the legend."
    },
    {
      "id": "cre8-list",
      "type": "component",
      "category": "Data",
      "description": "List component.",
      "props": {
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Style variants <cre8-text-passage size=\"sm\"> <ul> <li>**bare** removes any lines…",
          "x-kind": "attribute"
        },
        "spacing": {
          "type": "string",
          "enum": [
            "condensed",
            "padded"
          ],
          "default": null,
          "description": "Spacing variants <cre8-text-passage size=\"sm\"> <ul> <li>**padded** applies more …",
          "x-kind": "attribute"
        },
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Items for a data-driven list. Set this and the list builds its own `cre8-list-it…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[8]",
        "spec": {
          "component": "cre8-list",
          "children": [
            {
              "component": "cre8-list-item",
              "children": [
                "Validate before returning a spec."
              ]
            },
            {
              "component": "cre8-list-item",
              "children": [
                "Look up children-vs-slots; it cannot be guessed."
              ]
            },
            {
              "component": "cre8-list-item",
              "children": [
                "Stream tokens with appendText, not by resending the tree."
              ]
            }
          ]
        }
      }
    },
    {
      "id": "prop:cre8-list:spacing",
      "type": "enum_prop",
      "name": "spacing",
      "component": "cre8-list",
      "enum": [
        "condensed",
        "padded"
      ],
      "description": "Spacing variants <cre8-text-passage size=\"sm\"> <ul> <li>**padded** applies more …"
    },
    {
      "id": "cre8-list-item",
      "type": "component",
      "category": "Data",
      "description": "List Item component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[8].children[0]",
        "spec": {
          "component": "cre8-list-item",
          "children": [
            "Validate before returning a spec."
          ]
        }
      }
    },
    {
      "id": "cre8-remove-tag",
      "type": "component",
      "category": "Data",
      "description": "Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select). These tags always dis…",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The tag text",
          "x-kind": "attribute"
        },
        "color": {
          "type": "string",
          "enum": [
            "neutral",
            "branded",
            "neutral-hybrid"
          ],
          "default": "neutral",
          "description": "The tag color scheme - **neutral** should be used when doing non-link actions su…",
          "x-kind": "attribute"
        },
        "shape": {
          "type": "string",
          "enum": [
            "round",
            "square"
          ],
          "default": "round",
          "description": "The tag shape - **round** will give the tag a rounded border - **square** will g…",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled state for remove tag",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-remove-tag:color",
      "type": "enum_prop",
      "name": "color",
      "component": "cre8-remove-tag",
      "enum": [
        "neutral",
        "branded",
        "neutral-hybrid"
      ],
      "description": "The tag color scheme - **neutral** should be used when doing non-link actions su…"
    },
    {
      "id": "prop:cre8-remove-tag:shape",
      "type": "enum_prop",
      "name": "shape",
      "component": "cre8-remove-tag",
      "enum": [
        "round",
        "square"
      ],
      "description": "The tag shape - **round** will give the tag a rounded border - **square** will g…"
    },
    {
      "id": "cre8-table",
      "type": "component",
      "category": "Data",
      "description": "Table component.",
      "props": {
        "columns": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Columns for a data-driven table. Set this with `rows` and the table builds its o…",
          "x-kind": "attribute"
        },
        "rows": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Rows for a data-driven table. Each row is either an object keyed by the columns'…",
          "x-kind": "attribute"
        },
        "caption": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Specifies the caption/title of the table, visible to all users. Increases access…",
          "x-kind": "attribute"
        },
        "behavior": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Behavior variants <cre8-text-passage size=\"sm\"> <ul> <li>**responsive** stacks c…",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Style variants <cre8-text-passage size=\"sm\"> <ul> <li>**striped** add zebra-stri…",
          "x-kind": "attribute"
        },
        "isHoverable": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Hoverable rows variant 1) Allows the table rows to be styled on hover",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3]",
        "spec": {
          "component": "cre8-table",
          "props": {
            "caption": "Model performance statistics for the last 24 hours",
            "variant": "striped"
          },
          "children": [
            {
              "component": "cre8-table-header",
              "children": [
                {
                  "component": "cre8-table-row",
                  "slots": {
                    "default": [
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Model"
                        ]
                      },
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Requests"
                        ]
                      },
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Tokens"
                        ]
                      },
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Avg Latency"
                        ]
                      },
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Cost"
                        ]
                      },
                      {
                        "component": "cre8-table-header-cell",
                        "children": [
                          "Error Rate"
                        ]
                      }
                    ]
                  }
                }
              ]
            },
            {
              "component": "cre8-table-body",
              "children": [
                {
                  "component": "cre8-table-row",
                  "slots": {
                    "default": [
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "claude-3-5-sonnet"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "5,267"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1.72M"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "0.92s"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "$14.82"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          {
                            "component": "cre8-badge",
                            "props": {
                              "text": "0.2%",
                              "status": "success"
                            }
                          }
                        ]
                      }
                    ]
                  }
                },
                {
                  "component": "cre8-table-row",
                  "slots": {
                    "default": [
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "gpt-4o"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "4,368"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1.43M"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1.45s"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "$18.34"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          {
                            "component": "cre8-badge",
                            "props": {
                              "text": "0.5%",
                              "status": "info"
                            }
                          }
                        ]
                      }
                    ]
                  }
                },
                {
                  "component": "cre8-table-row",
                  "slots": {
                    "default": [
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "gemini-1.5-pro"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1,927"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "0.63M"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1.12s"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "$3.87"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          {
                            "component": "cre8-badge",
                            "props": {
                              "text": "0.8%",
                              "status": "warning"
                            }
                          }
                        ]
                      }
                    ]
                  }
                },
                {
                  "component": "cre8-table-row",
                  "slots": {
                    "default": [
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "gpt-4o-mini"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "1,285"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "0.42M"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "0.52s"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          "$1.39"
                        ]
                      },
                      {
                        "component": "cre8-table-cell",
                        "children": [
                          {
                            "component": "cre8-badge",
                            "props": {
                              "text": "0.3%",
                              "status": "success"
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-table-body",
      "type": "component",
      "category": "Data",
      "description": "Table Body component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3].children[1]",
        "spec": {
          "component": "cre8-table-body",
          "children": [
            {
              "component": "cre8-table-row",
              "slots": {
                "default": [
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "claude-3-5-sonnet"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "5,267"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1.72M"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "0.92s"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "$14.82"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      {
                        "component": "cre8-badge",
                        "props": {
                          "text": "0.2%",
                          "status": "success"
                        }
                      }
                    ]
                  }
                ]
              }
            },
            {
              "component": "cre8-table-row",
              "slots": {
                "default": [
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "gpt-4o"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "4,368"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1.43M"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1.45s"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "$18.34"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      {
                        "component": "cre8-badge",
                        "props": {
                          "text": "0.5%",
                          "status": "info"
                        }
                      }
                    ]
                  }
                ]
              }
            },
            {
              "component": "cre8-table-row",
              "slots": {
                "default": [
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "gemini-1.5-pro"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1,927"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "0.63M"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1.12s"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "$3.87"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      {
                        "component": "cre8-badge",
                        "props": {
                          "text": "0.8%",
                          "status": "warning"
                        }
                      }
                    ]
                  }
                ]
              }
            },
            {
              "component": "cre8-table-row",
              "slots": {
                "default": [
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "gpt-4o-mini"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "1,285"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "0.42M"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "0.52s"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      "$1.39"
                    ]
                  },
                  {
                    "component": "cre8-table-cell",
                    "children": [
                      {
                        "component": "cre8-badge",
                        "props": {
                          "text": "0.3%",
                          "status": "success"
                        }
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-table-cell",
      "type": "component",
      "category": "Data",
      "description": "Table Cell component.",
      "props": {
        "colspan": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Colspan attribute on td",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Style variants <cre8-text-passage size=\"sm\"> <ul> <li>**bare** renders a table c…",
          "x-kind": "attribute"
        },
        "dataHeader": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Column header text for cell to display when table is using responsive variant",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3].children[1].children[0].slots.default[0]",
        "spec": {
          "component": "cre8-table-cell",
          "children": [
            "claude-3-5-sonnet"
          ]
        }
      }
    },
    {
      "id": "cre8-table-header",
      "type": "component",
      "category": "Data",
      "description": "Table Header component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3].children[0]",
        "spec": {
          "component": "cre8-table-header",
          "children": [
            {
              "component": "cre8-table-row",
              "slots": {
                "default": [
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Model"
                    ]
                  },
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Requests"
                    ]
                  },
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Tokens"
                    ]
                  },
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Avg Latency"
                    ]
                  },
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Cost"
                    ]
                  },
                  {
                    "component": "cre8-table-header-cell",
                    "children": [
                      "Error Rate"
                    ]
                  }
                ]
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-table-header-cell",
      "type": "component",
      "category": "Data",
      "description": "Table Header Cell component.",
      "props": {
        "colspan": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Colspan attribute on th",
          "x-kind": "attribute"
        },
        "width": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Adds inline width style to th Sets width of entire column",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3].children[0].children[0].slots.default[0]",
        "spec": {
          "component": "cre8-table-header-cell",
          "children": [
            "Model"
          ]
        }
      }
    },
    {
      "id": "cre8-table-object",
      "type": "component",
      "category": "Data",
      "description": "Table Object component.",
      "props": {},
      "slots": [
        "default",
        "header",
        "footer"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-table-object:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-table-object",
      "description": "The component content"
    },
    {
      "id": "slot:cre8-table-object:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-table-object",
      "description": "Content rendered in the table object header"
    },
    {
      "id": "slot:cre8-table-object:footer",
      "type": "slot",
      "name": "footer",
      "component": "cre8-table-object",
      "description": "Content rendered in the table object footer"
    },
    {
      "id": "cre8-table-row",
      "type": "component",
      "category": "Data",
      "description": "Table Row component.",
      "props": {
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Style variants <cre8-text-passage size=\"sm\"> <ul> <li>**bare** renders a table r…",
          "x-kind": "attribute"
        },
        "isExpanded": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Visually show additional expandable content",
          "x-kind": "property"
        },
        "isExpandable": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Indicates row has additional visually hidden related content",
          "x-kind": "property"
        },
        "expandedButtonText": {
          "type": "string",
          "enum": null,
          "default": "Collapse Table Row",
          "description": "Expanded button text",
          "x-kind": "property"
        },
        "collapsedButtonText": {
          "type": "string",
          "enum": null,
          "default": "Expand Table Row",
          "description": "Expand button text",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "expandableContent"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[3].children[0].children[0]",
        "spec": {
          "component": "cre8-table-row",
          "slots": {
            "default": [
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Model"
                ]
              },
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Requests"
                ]
              },
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Tokens"
                ]
              },
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Avg Latency"
                ]
              },
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Cost"
                ]
              },
              {
                "component": "cre8-table-header-cell",
                "children": [
                  "Error Rate"
                ]
              }
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-table-row:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-table-row",
      "description": "The component content"
    },
    {
      "id": "slot:cre8-table-row:expandableContent",
      "type": "slot",
      "name": "expandableContent",
      "component": "cre8-table-row",
      "description": "Content revealed when the row is expanded"
    },
    {
      "id": "cre8-tag",
      "type": "component",
      "category": "Data",
      "description": "The tag component allows you to make selections, filter content, or trigger actions. While buttons are expected to appea…",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The text label displayed inside the tag.",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "neutral",
            "branded",
            "neutral-hybrid"
          ],
          "default": "neutral",
          "description": "Color variant **neutral** renders the default, unselected tag **branded** render…",
          "x-kind": "attribute"
        },
        "shape": {
          "type": "string",
          "enum": [
            "square",
            "round"
          ],
          "default": "square",
          "description": "shape of the tag, supports square and round, and default not mentioned its a squ…",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": [
            "checkbox",
            "radio"
          ],
          "default": null,
          "description": "Type of tag **checkbox** renders a checkbox tag **radio** renders a radio tag",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is disabled",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is required",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "isDisabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled attribute renders a greyed out tag that the user cannot interact with",
          "x-kind": "property"
        },
        "isSelected": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Selected attribute renders a selected tag",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The fieldId attribute is assigned to the HTML input element of the radio button …",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Whether the field is in a success state",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[4].children[0]",
        "spec": {
          "component": "cre8-tag",
          "props": {
            "text": "Design tokens",
            "type": "checkbox",
            "variant": "neutral",
            "shape": "round",
            "name": "topics"
          }
        }
      }
    },
    {
      "id": "prop:cre8-tag:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-tag",
      "enum": [
        "neutral",
        "branded",
        "neutral-hybrid"
      ],
      "description": "Color variant **neutral** renders the default, unselected tag **branded** render…"
    },
    {
      "id": "prop:cre8-tag:shape",
      "type": "enum_prop",
      "name": "shape",
      "component": "cre8-tag",
      "enum": [
        "square",
        "round"
      ],
      "description": "shape of the tag, supports square and round, and default not mentioned its a squ…"
    },
    {
      "id": "prop:cre8-tag:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-tag",
      "enum": [
        "checkbox",
        "radio"
      ],
      "description": "Type of tag **checkbox** renders a checkbox tag **radio** renders a radio tag"
    },
    {
      "id": "cre8-tag-list",
      "type": "component",
      "category": "Data",
      "description": "Tag List must have children which are Tag components that are of type `checkbox` or `radio`. The Tags must use the `neut…",
      "props": {
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Tag list legend label",
          "x-kind": "attribute"
        },
        "tags": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Tags for a data-driven tag list. Set this and the list builds its own `cre8-tag`…",
          "x-kind": "attribute"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The unique id of the select",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[4]",
        "spec": {
          "component": "cre8-tag-list",
          "props": {
            "label": "Topics",
            "fieldId": "topics"
          },
          "children": [
            {
              "component": "cre8-tag",
              "props": {
                "text": "Design tokens",
                "type": "checkbox",
                "variant": "neutral",
                "shape": "round",
                "name": "topics"
              }
            },
            {
              "component": "cre8-tag",
              "props": {
                "text": "Streaming UI",
                "type": "checkbox",
                "variant": "neutral",
                "shape": "round",
                "name": "topics"
              }
            },
            {
              "component": "cre8-tag",
              "props": {
                "text": "Accessibility",
                "type": "checkbox",
                "variant": "neutral",
                "shape": "round",
                "name": "topics"
              }
            },
            {
              "component": "cre8-tag",
              "props": {
                "text": "Web components",
                "type": "checkbox",
                "variant": "neutral",
                "shape": "round",
                "name": "topics"
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-accordion",
      "type": "component",
      "category": "Disclosure",
      "description": "The component is a vertically stacked list of headers that reveal or hide sections of related content on a page. The hea…",
      "props": {
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Panels for a data-driven accordion. Each becomes a `cre8-accordion-item` with it…",
          "x-kind": "attribute"
        },
        "borderType": {
          "type": "string",
          "enum": [
            "rectangle",
            "rounded-bottom",
            "rounded",
            "none"
          ],
          "default": null,
          "description": "borderType",
          "x-kind": "property"
        },
        "hasDivider": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "When it is true, the inner dividers are displayed; if it is false, the inner div…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[2]",
        "spec": {
          "component": "cre8-accordion",
          "props": {
            "borderType": "rounded",
            "hasDivider": true
          },
          "children": [
            {
              "component": "cre8-accordion-item",
              "props": {
                "heading": "What is a surface?",
                "headingTagVariant": "h3",
                "isActive": true
              },
              "slots": {
                "default": [
                  {
                    "component": "cre8-text-passage",
                    "children": [
                      "A region of UI an agent builds up over time while someone watches it happen."
                    ]
                  }
                ]
              }
            },
            {
              "component": "cre8-accordion-item",
              "props": {
                "heading": "How do patches address a node?",
                "headingTagVariant": "h3"
              },
              "slots": {
                "default": [
                  {
                    "component": "cre8-text-passage",
                    "children": [
                      "By the position path the renderer already emits on events: $.slots.footer[0]."
                    ]
                  }
                ]
              }
            }
          ]
        }
      }
    },
    {
      "id": "prop:cre8-accordion:borderType",
      "type": "enum_prop",
      "name": "borderType",
      "component": "cre8-accordion",
      "enum": [
        "rectangle",
        "rounded-bottom",
        "rounded",
        "none"
      ],
      "description": "borderType"
    },
    {
      "id": "cre8-accordion-item",
      "type": "component",
      "category": "Disclosure",
      "description": "The accordion item component delivers large amounts of content in a small space through progressive disclosure. That is,…",
      "props": {
        "size": {
          "type": "string",
          "enum": [
            "sm",
            "lg"
          ],
          "default": "sm",
          "description": "Users can choose between two header sizes: 'sm' [title-default] or 'lg' [title-l…",
          "x-kind": "attribute"
        },
        "heading": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Controls the text content of the Accordion Item heading.",
          "x-kind": "attribute"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "When true, the Accordion Item is opens, when false it closes;",
          "x-kind": "property"
        },
        "iconBefore": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Controls the positioning of the dropdown icon in relation to the text, true puts…",
          "x-kind": "property"
        },
        "tertiaryIcon": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Controls the appearance of dropdown icon as being an icon-only button. true rend…",
          "x-kind": "property"
        },
        "headingTagVariant": {
          "type": "string",
          "enum": [
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "h6"
          ],
          "default": "h3",
          "description": "Purely meant to help the user structure the HTML page hierarchy. Does not change…",
          "x-kind": "property"
        },
        "brandHeader": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Controls whether the header takes on the theme's 'brand-strong' color",
          "x-kind": "property"
        },
        "accordionItemId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Optional custom id for the accordion item, if one is not set, a random id is gen…",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "heading"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[2].children[0]",
        "spec": {
          "component": "cre8-accordion-item",
          "props": {
            "heading": "What is a surface?",
            "headingTagVariant": "h3",
            "isActive": true
          },
          "slots": {
            "default": [
              {
                "component": "cre8-text-passage",
                "children": [
                  "A region of UI an agent builds up over time while someone watches it happen."
                ]
              }
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-accordion-item:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-accordion-item",
      "description": "The body of the accordion item will be any valid html\ninserted between the cre8-accordion-item opening and closing tags."
    },
    {
      "id": "slot:cre8-accordion-item:heading",
      "type": "slot",
      "name": "heading",
      "component": "cre8-accordion-item",
      "description": "Custom heading content, used when the `heading` property is not set."
    },
    {
      "id": "prop:cre8-accordion-item:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-accordion-item",
      "enum": [
        "sm",
        "lg"
      ],
      "description": "Users can choose between two header sizes: 'sm' [title-default] or 'lg' [title-l…"
    },
    {
      "id": "prop:cre8-accordion-item:headingTagVariant",
      "type": "enum_prop",
      "name": "headingTagVariant",
      "component": "cre8-accordion-item",
      "enum": [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6"
      ],
      "description": "Purely meant to help the user structure the HTML page hierarchy. Does not change…"
    },
    {
      "id": "cre8-dropdown",
      "type": "component",
      "category": "Disclosure",
      "description": "The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list",
      "props": {
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Items for a data-driven dropdown. Set this and the dropdown builds its own `cre8…",
          "x-kind": "attribute"
        },
        "buttonText": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Dropdown header",
          "x-kind": "property"
        },
        "maxHeight": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Enables scrolling once content reached to specified height, the height should me…",
          "x-kind": "property"
        },
        "dropdownWithLink": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "button text represents as a link",
          "x-kind": "property"
        },
        "open": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "dropdownContent": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[16]",
        "spec": {
          "component": "cre8-dropdown",
          "props": {
            "buttonText": "Theme"
          },
          "children": [
            {
              "component": "cre8-dropdown-item",
              "props": {
                "ariaLabel": "Use the cre8 brand"
              },
              "children": [
                "cre8"
              ]
            },
            {
              "component": "cre8-dropdown-item",
              "props": {
                "ariaLabel": "Use the a2ui brand"
              },
              "children": [
                "cre8-a2ui"
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-dropdown-item",
      "type": "component",
      "category": "Disclosure",
      "description": "The Dropdown item component is designed to be used with Dropdown component, each item represents a selectable option or …",
      "props": {
        "ariaLabel": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The accessible label for the item. Falls back to the item's text content when un…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[16].children[0]",
        "spec": {
          "component": "cre8-dropdown-item",
          "props": {
            "ariaLabel": "Use the cre8 brand"
          },
          "children": [
            "cre8"
          ]
        }
      }
    },
    {
      "id": "cre8-modal",
      "type": "component",
      "category": "Disclosure",
      "description": "Modal component should be used in all modal situations. It is natuarally composable and can even have a custom header an…",
      "props": {
        "status": {
          "type": "string",
          "enum": [
            "error",
            "info",
            "warning",
            "success",
            "help"
          ],
          "default": null,
          "description": "Status Types <cre8-text-passage size=\"sm\"> <ul> <li>**default (no value)** rende…",
          "x-kind": "attribute"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Is Active attribute",
          "x-kind": "property"
        },
        "utilityModalTitle": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Utility Modal Heading (String)",
          "x-kind": "property"
        },
        "notDismissible": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Not dismissible modal",
          "x-kind": "property"
        },
        "closeButtonText": {
          "type": "string",
          "enum": null,
          "default": "close",
          "description": "Close Button Text",
          "x-kind": "property"
        },
        "closeButtonIcon": {
          "type": "string",
          "enum": null,
          "default": "close",
          "description": "Close Button Icon",
          "x-kind": "property"
        },
        "ariaLabel": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Modal Aria Label - This is required for accessibility and provides context of th…",
          "x-kind": "property"
        },
        "mapStatusToIconModal": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Maps modal icons and modal status variants to what the alt text of the related i…",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "header",
        "footer"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-modal:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-modal",
      "description": "The component content"
    },
    {
      "id": "slot:cre8-modal:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-modal",
      "description": "Custom header content for the modal"
    },
    {
      "id": "slot:cre8-modal:footer",
      "type": "slot",
      "name": "footer",
      "component": "cre8-modal",
      "description": "Custom footer content for the modal"
    },
    {
      "id": "prop:cre8-modal:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-modal",
      "enum": [
        "error",
        "info",
        "warning",
        "success",
        "help"
      ],
      "description": "Status Types <cre8-text-passage size=\"sm\"> <ul> <li>**default (no value)** rende…"
    },
    {
      "id": "cre8-popover",
      "type": "component",
      "category": "Disclosure",
      "description": "The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon. Its content shoul…",
      "props": {
        "heading": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The heading text that appears at the top of the popover panel. Should only be 2-…",
          "x-kind": "attribute"
        },
        "position": {
          "type": "string",
          "enum": [
            "top",
            "left",
            "right"
          ],
          "default": null,
          "description": "Positions the popover panel absolutely to the trigger - Omitting this prop posit…",
          "x-kind": "attribute"
        },
        "isVisibleOnScroll": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Set to prevent the popover panel from hiding on scroll",
          "x-kind": "property"
        },
        "isDynamic": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The dynamic state for the popover - If true, the popover panel placement is dete…",
          "x-kind": "property"
        },
        "isActiveDynamic": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The dynamic active state _This property is dynamically set_",
          "x-kind": "property"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The active state for the popover - If true, the popover panel is visible - If fa…",
          "x-kind": "property"
        },
        "isRTL": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Query the document direction value <br/><br/> _*This property is dynamically set…",
          "x-kind": "property"
        },
        "handleOnClickOutside": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Handle click outside the component 1. Close the show/hide popover panel on click…",
          "x-kind": "property"
        },
        "removeActiveOnScroll": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Remove Active State on Scroll 1. If a scroll event is fired and visibileOnScroll…",
          "x-kind": "property"
        },
        "removeActive": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Remove Active State 1. If a specific event is fired, remove the active state.",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "trigger",
        "header",
        "footer"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-popover:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-popover",
      "description": "The component content"
    },
    {
      "id": "slot:cre8-popover:trigger",
      "type": "slot",
      "name": "trigger",
      "component": "cre8-popover",
      "description": "The element that toggles the popover open and closed"
    },
    {
      "id": "slot:cre8-popover:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-popover",
      "description": "Custom header content for the popover panel"
    },
    {
      "id": "slot:cre8-popover:footer",
      "type": "slot",
      "name": "footer",
      "component": "cre8-popover",
      "description": "Custom footer content for the popover panel"
    },
    {
      "id": "prop:cre8-popover:position",
      "type": "enum_prop",
      "name": "position",
      "component": "cre8-popover",
      "enum": [
        "top",
        "left",
        "right"
      ],
      "description": "Positions the popover panel absolutely to the trigger - Omitting this prop posit…"
    },
    {
      "id": "cre8-submenu",
      "type": "component",
      "category": "Disclosure",
      "description": "Submenu component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-submenu-item",
      "type": "component",
      "category": "Disclosure",
      "description": "Submenu Item component.",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The link URL",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-tooltip",
      "type": "component",
      "category": "Disclosure",
      "description": "The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does. If you nee…",
      "props": {
        "position": {
          "type": "string",
          "enum": [
            "default",
            "top",
            "left",
            "right"
          ],
          "default": null,
          "description": "Positions the tooltip panel absolutely to the icon. Position overrides `isDynami…",
          "x-kind": "attribute"
        },
        "knockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The knockout variant for the tooltip",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "svg as a raw string - The icon is defined by this prop. - Pass in a raw svg as a…",
          "x-kind": "attribute"
        },
        "isDynamic": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The dynamic state for the tooltip. Position overrides isDynamic.",
          "x-kind": "property"
        },
        "isActiveDynamic": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The dynamic active state",
          "x-kind": "property"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The active state for the tooltip",
          "x-kind": "property"
        },
        "ariaDescribes": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Accepts the ID string of the item the tooltip is referencing",
          "x-kind": "property"
        },
        "iconRotateDegree": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "iconRotateDegree is used for <cre8-icon> to set the arrow in the correct directi…",
          "x-kind": "property"
        },
        "iconFlipDirection": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "iconFlipDirection is used for <cre8-icon> to set the icon in the correct directi…",
          "x-kind": "property"
        },
        "isRTL": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Query the document direction value <br/><br/> _*This property is dynamically set…",
          "x-kind": "property"
        },
        "removeActive": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Remove Active State 1. If a specific event is fired, remove the active state.",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "trigger"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-tooltip:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-tooltip",
      "description": "Default, unnamed slot container for Tooltip text"
    },
    {
      "id": "slot:cre8-tooltip:trigger",
      "type": "slot",
      "name": "trigger",
      "component": "cre8-tooltip",
      "description": "Named slot container for Tooltip element to trigger showing/hiding the Tooltip text"
    },
    {
      "id": "prop:cre8-tooltip:position",
      "type": "enum_prop",
      "name": "position",
      "component": "cre8-tooltip",
      "enum": [
        "default",
        "top",
        "left",
        "right"
      ],
      "description": "Positions the tooltip panel absolutely to the icon. Position overrides `isDynami…"
    },
    {
      "id": "cre8-alert",
      "type": "component",
      "category": "Feedback",
      "description": "The general purpose of an alert or notification is to draw the user’s attention and provide the user with timely, releva…",
      "props": {
        "status": {
          "type": "string",
          "enum": [
            "error",
            "info",
            "notification",
            "neutral",
            "warning",
            "success"
          ],
          "default": "info",
          "description": "The alert type.",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "standalone",
            "banner"
          ],
          "default": "standalone",
          "description": "The alert variant.",
          "x-kind": "attribute"
        },
        "emphasis": {
          "type": "string",
          "enum": [
            "subtle",
            "strong"
          ],
          "default": "subtle",
          "description": "The alert emphasis. `strong` uses a filled background; pair contained buttons/li…",
          "x-kind": "attribute"
        },
        "dismissed": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Dismissed property 1) State that changes to true and is removed when the banner …",
          "x-kind": "attribute"
        },
        "iconAlert": {
          "type": "string",
          "enum": null,
          "default": "undefined",
          "description": "Overrides the default status icon. Accepts a cre8 icon name.",
          "x-kind": "property"
        },
        "iconTitle": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Icon title used for the icon alt text",
          "x-kind": "property"
        },
        "headerText": {
          "type": "string",
          "enum": null,
          "default": "undefined",
          "description": "The alert heading text.",
          "x-kind": "property"
        },
        "ctaBody": {
          "type": "string",
          "enum": null,
          "default": "undefined",
          "description": "Text content for the call-to-action area. Superseded by the `cta` slot when prov…",
          "x-kind": "property"
        },
        "notDismissible": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Dismissable property 1) Adds the ability to close when toggled to true",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "cta"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-alert:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-alert",
      "description": "The alert body content"
    },
    {
      "id": "slot:cre8-alert:cta",
      "type": "slot",
      "name": "cta",
      "component": "cre8-alert",
      "description": "Container for a call-to-action button or link"
    },
    {
      "id": "prop:cre8-alert:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-alert",
      "enum": [
        "error",
        "info",
        "notification",
        "neutral",
        "warning",
        "success"
      ],
      "description": "The alert type."
    },
    {
      "id": "prop:cre8-alert:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-alert",
      "enum": [
        "standalone",
        "banner"
      ],
      "description": "The alert variant."
    },
    {
      "id": "prop:cre8-alert:emphasis",
      "type": "enum_prop",
      "name": "emphasis",
      "component": "cre8-alert",
      "enum": [
        "subtle",
        "strong"
      ],
      "description": "The alert emphasis. `strong` uses a filled background; pair contained buttons/li…"
    },
    {
      "id": "cre8-badge",
      "type": "component",
      "category": "Feedback",
      "description": "Status badges are used most often in tables or fat rows in a list. These Components serve a contextual purpose and don't…",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": "undefined",
          "description": "The badge text",
          "x-kind": "attribute"
        },
        "status": {
          "type": "string",
          "enum": [
            "error",
            "info",
            "warning",
            "success",
            "attention"
          ],
          "default": null,
          "description": "Status (a color variant prop) - Omitting this prop renders a badge with the neut…",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "light",
            "white"
          ],
          "default": null,
          "description": "Background Style Variant - Omitting this prop renders a badge with a dark backgr…",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "SVG as a raw string - For badges with icons, the icon is defined by this prop - …",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[1].children[0].children[0].children[0].slots.default[0]",
        "spec": {
          "component": "cre8-badge",
          "props": {
            "text": "Accessories",
            "status": "info"
          }
        }
      }
    },
    {
      "id": "prop:cre8-badge:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-badge",
      "enum": [
        "error",
        "info",
        "warning",
        "success",
        "attention"
      ],
      "description": "Status (a color variant prop) - Omitting this prop renders a badge with the neut…"
    },
    {
      "id": "prop:cre8-badge:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-badge",
      "enum": [
        "light",
        "white"
      ],
      "description": "Background Style Variant - Omitting this prop renders a badge with a dark backgr…"
    },
    {
      "id": "cre8-inline-alert",
      "type": "component",
      "category": "Feedback",
      "description": "In cases when it is necessary to alert the user but a less strong message that cannot be dismissed is desired, use an in…",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "subtle",
            "transparent"
          ],
          "default": "subtle",
          "description": "Variant - **subtle** (default) renders an alert message in a padded container wi…",
          "x-kind": "attribute"
        },
        "status": {
          "type": "string",
          "enum": [
            "error",
            "info",
            "neutral",
            "warning",
            "success",
            "attention",
            "help"
          ],
          "default": "info",
          "description": "Status - **default** renders an inline alert with the brand colors - **error** r…",
          "x-kind": "attribute"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "DEPRECATED: Icon name used for the icon before to the field note",
          "x-kind": "property"
        },
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full width Inline Alert",
          "x-kind": "property"
        },
        "iconTitle": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Icon title used for the icon alt text",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[0]",
        "spec": {
          "component": "cre8-inline-alert",
          "props": {
            "status": "warning"
          },
          "children": [
            "OpenAI TPM rate limit at 78% — consider switching high-volume prompts to gpt-4o-mini or Claude 3.5 Sonnet."
          ]
        }
      }
    },
    {
      "id": "prop:cre8-inline-alert:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-inline-alert",
      "enum": [
        "subtle",
        "transparent"
      ],
      "description": "Variant - **subtle** (default) renders an alert message in a padded container wi…"
    },
    {
      "id": "prop:cre8-inline-alert:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-inline-alert",
      "enum": [
        "error",
        "info",
        "neutral",
        "warning",
        "success",
        "attention",
        "help"
      ],
      "description": "Status - **default** renders an inline alert with the brand colors - **error** r…"
    },
    {
      "id": "cre8-loading-spinner",
      "type": "component",
      "category": "Feedback",
      "description": "A loading spinner notifies the user that their request is being processed while the front end is retrieving data or perf…",
      "props": {
        "determinate": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Mode of the spinner, defaults to indeterminate. If true, renders a standard prog…",
          "x-kind": "attribute"
        },
        "inverse": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverse property used for dark backgrounds.",
          "x-kind": "attribute"
        },
        "neutral": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Neutral property used for secondary neutral loading button.",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Label to show along with progress indicator. This is required to meet accessibil…",
          "x-kind": "attribute"
        },
        "progress": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "Progress to display, between 0 and 100. Requires determinate property to be set …",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "large",
            "small"
          ],
          "default": "large",
          "description": "Size of the progress indicator and position of the label, if a label has been de…",
          "x-kind": "attribute"
        },
        "buttonVariant": {
          "type": "string",
          "enum": [
            "primary",
            "secondary",
            "tertiary"
          ],
          "default": null,
          "description": "Property that specifies which button variant is using the loading spinner",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-loading-spinner:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-loading-spinner",
      "enum": [
        "large",
        "small"
      ],
      "description": "Size of the progress indicator and position of the label, if a label has been de…"
    },
    {
      "id": "prop:cre8-loading-spinner:buttonVariant",
      "type": "enum_prop",
      "name": "buttonVariant",
      "component": "cre8-loading-spinner",
      "enum": [
        "primary",
        "secondary",
        "tertiary"
      ],
      "description": "Property that specifies which button variant is using the loading spinner"
    },
    {
      "id": "cre8-percent-bar",
      "type": "component",
      "category": "Feedback",
      "description": "The percent bar visually indicates a user's current progress and has a few features: a basic display bar with a percenta…",
      "props": {
        "value": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "The current step the user is on.",
          "x-kind": "attribute"
        },
        "max": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "The total number of steps in the multistep process.",
          "x-kind": "attribute"
        },
        "disableActionLeft": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The action-left icon-only tertiary button in the percent bar controls can be dis…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-progress-meter",
      "type": "component",
      "category": "Feedback",
      "description": "A progress meter provides feedback that the system is working and gives the user an indication of how much time they wil…",
      "props": {
        "status": {
          "type": "string",
          "enum": [
            "error",
            "warning",
            "success"
          ],
          "default": null,
          "description": "Progress Status - **Default** renders a meter with default status fill - **Error…",
          "x-kind": "attribute"
        },
        "knockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Determines if the progress meter is displayed on a dark background (uses knockou…",
          "x-kind": "attribute"
        },
        "max": {
          "type": "number",
          "enum": null,
          "default": 100,
          "description": "The max number for the progress bar (defaulted to 100 to match percentages)",
          "x-kind": "attribute"
        },
        "value": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "The the percentage of the bar that is filled in (defaulted to match percentages)…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Progress Meter name",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Progress Meter label",
          "x-kind": "attribute"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Progress Meter FieldId",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[1].children[1].children[0].children[0].slots.default[1]",
        "spec": {
          "component": "cre8-progress-meter",
          "props": {
            "value": 78,
            "max": 100,
            "status": "warning",
            "label": "78 / 100 TPM"
          }
        }
      }
    },
    {
      "id": "prop:cre8-progress-meter:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-progress-meter",
      "enum": [
        "error",
        "warning",
        "success"
      ],
      "description": "Progress Status - **Default** renders a meter with default status fill - **Error…"
    },
    {
      "id": "cre8-progress-steps",
      "type": "component",
      "category": "Feedback",
      "description": "The Progress Steps component is used to display where a user is in a multistep process. It clearly indicates the total n…",
      "props": {
        "steps": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Steps for a data-driven progress indicator. Note that the visible label is each …",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[12]",
        "spec": {
          "component": "cre8-progress-steps",
          "children": [
            {
              "component": "cre8-progress-steps-item",
              "props": {
                "name": "Open surface",
                "message": "Returned a URL",
                "state": "complete"
              }
            },
            {
              "component": "cre8-progress-steps-item",
              "props": {
                "name": "Stream ops",
                "message": "Patching live",
                "state": "current"
              }
            },
            {
              "component": "cre8-progress-steps-item",
              "props": {
                "name": "Await events",
                "message": "Waiting on a click"
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-progress-steps-item",
      "type": "component",
      "category": "Feedback",
      "description": "The Progress Steps Item component is used to display a single step in a multi-step process. It should be used as a child…",
      "props": {
        "state": {
          "type": "string",
          "enum": [
            "error",
            "warning",
            "complete",
            "current",
            "incomplete"
          ],
          "default": null,
          "description": "The state of the step.",
          "x-kind": "attribute"
        },
        "message": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Optional message to display under the step name.",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the step.",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "An SVG string to use as the step icon.",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[12].children[0]",
        "spec": {
          "component": "cre8-progress-steps-item",
          "props": {
            "name": "Open surface",
            "message": "Returned a URL",
            "state": "complete"
          }
        }
      }
    },
    {
      "id": "prop:cre8-progress-steps-item:state",
      "type": "enum_prop",
      "name": "state",
      "component": "cre8-progress-steps-item",
      "enum": [
        "error",
        "warning",
        "complete",
        "current",
        "incomplete"
      ],
      "description": "The state of the step."
    },
    {
      "id": "cre8-skeleton-loader",
      "type": "component",
      "category": "Feedback",
      "description": "Skeleton Loader allows for the ability to create placeholder UI loading states. Developers are encouraged to pass into t…",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "rectangle",
            "square",
            "circle"
          ],
          "default": "rectangle",
          "description": "Style variant - **rectangle** renders a featureless rectangle as a placeholder f…",
          "x-kind": "attribute"
        },
        "height": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Height inline style 1. Used to set a height on the skeleton if specific size is …",
          "x-kind": "attribute"
        },
        "width": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Width inline style 1. Used to set a width on the skeleton if specific size is ne…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-skeleton-loader:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-skeleton-loader",
      "enum": [
        "rectangle",
        "square",
        "circle"
      ],
      "description": "Style variant - **rectangle** renders a featureless rectangle as a placeholder f…"
    },
    {
      "id": "cre8-checkbox-field",
      "type": "component",
      "category": "Forms",
      "description": "Checkbox Field is the parent container for `checkbox-field-item`. It is required to allow for grouping numerous checkbox…",
      "props": {
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox container legend label",
          "x-kind": "attribute"
        },
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Checkboxes for a data-driven field. Each becomes a `cre8-checkbox-field-item`, s…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Form control name shared by every generated item.",
          "x-kind": "attribute"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote aria describe by",
          "x-kind": "property"
        },
        "fieldNoteIconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote icon name",
          "x-kind": "property"
        },
        "fieldNoteKnockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote knockout",
          "x-kind": "property"
        },
        "fieldNoteIsSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote isSuccess",
          "x-kind": "property"
        },
        "fieldNoteIsError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Checkbox container fieldnote isError",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[6]",
        "spec": {
          "component": "cre8-checkbox-field",
          "props": {
            "label": "Notify me about",
            "fieldNote": "You can change this later."
          },
          "children": [
            {
              "component": "cre8-checkbox-field-item",
              "props": {
                "label": "Catalog changes",
                "name": "notify",
                "value": "catalog",
                "checked": true
              }
            },
            {
              "component": "cre8-checkbox-field-item",
              "props": {
                "label": "Breaking spec changes",
                "name": "notify",
                "value": "breaking"
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-checkbox-field-item",
      "type": "component",
      "category": "Forms",
      "description": "Checkbox Field Item is the combination of a checkbox input, label and field note. Checkboxes can turn an option on or of…",
      "props": {
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The checkbox label",
          "x-kind": "attribute"
        },
        "checked": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Checked State",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled State",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Required property",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "errorText": {
          "type": "string",
          "enum": null,
          "default": "Error",
          "description": "Visually hidden text that always signifies that this is an error for screen read…",
          "x-kind": "property"
        },
        "errorNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The error field note that appears below the default field note",
          "x-kind": "property"
        },
        "successText": {
          "type": "string",
          "enum": null,
          "default": "Success",
          "description": "Visually hidden text that always signifies that this is successful for screen re…",
          "x-kind": "property"
        },
        "successNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The success field note that appears below the default field note",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox FieldId",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox FieldNote",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox fieldnote ariaDescribeBy",
          "x-kind": "property"
        },
        "validationAriaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Additional aria-describedby connection to id for additional success and error no…",
          "x-kind": "property"
        },
        "fieldNoteIconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Checkbox fieldnote icon name",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success state",
          "x-kind": "property"
        },
        "type": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The type of form control (text, checkbox, radio, etc.)",
          "x-kind": "property"
        }
      },
      "slots": [
        "fieldNote"
      ],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[6].children[0]",
        "spec": {
          "component": "cre8-checkbox-field-item",
          "props": {
            "label": "Catalog changes",
            "name": "notify",
            "value": "catalog",
            "checked": true
          }
        }
      }
    },
    {
      "id": "slot:cre8-checkbox-field-item:fieldNote",
      "type": "slot",
      "name": "fieldNote",
      "component": "cre8-checkbox-field-item",
      "description": "Container for optional field note content"
    },
    {
      "id": "cre8-date-picker",
      "type": "component",
      "category": "Forms",
      "description": "The Date Picker component renders a form group with label, control, help text and validation styling much like the Field…",
      "props": {
        "autocomplete": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Autocomplete attribute that allows input to expect certain types of information.…",
          "x-kind": "attribute"
        },
        "pattern": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Pattern attribute defines a regular expression to validate against input",
          "x-kind": "attribute"
        },
        "placeholder": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The placeholder text that appears inside the input",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": "Label",
          "description": "The label text for the date picker field.",
          "x-kind": "attribute"
        },
        "max": {
          "type": [
            "string",
            "number"
          ],
          "enum": null,
          "default": null,
          "description": "The max attribute defines the maximum value that is acceptable and valid for the…",
          "x-kind": "attribute"
        },
        "min": {
          "type": [
            "string",
            "number"
          ],
          "enum": null,
          "default": null,
          "description": "The min attribute defines the minimum value that is acceptable and valid for the…",
          "x-kind": "attribute"
        },
        "maxlength": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The maxlength is an integer above 0 that indicates the maximum allowed character…",
          "x-kind": "attribute"
        },
        "readonly": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Readonly attribute",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": null,
          "default": "date",
          "description": "Type variants - **text** renders a standard text input - **email** renders a tex…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The disabled attribute on the input",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The required attribute on the input",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "hasShortcuts": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Quick Shortcuts Variant",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The unique id of the field <br/><br/> _*This property is dynamically set_",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The text that displays below in text field input",
          "x-kind": "property"
        },
        "ariaLive": {
          "type": "string",
          "enum": [
            "polite",
            "assertive"
          ],
          "default": "polite",
          "description": "Controls how the voiceover will experience the new information when field note c…",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Used to connect the field note in text field to the text menu for accessibility",
          "x-kind": "property"
        },
        "errorText": {
          "type": "string",
          "enum": null,
          "default": "Error",
          "description": "Visually hidden text that always signifies that this is an error for screen read…",
          "x-kind": "property"
        },
        "errorNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The error field note that appears below the default field note",
          "x-kind": "property"
        },
        "validationAriaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Additional aria-describedby connection to id for additional success and error no…",
          "x-kind": "property"
        },
        "successText": {
          "type": "string",
          "enum": null,
          "default": "Success",
          "description": "Visually hidden text that always signifies that this is successful for screen re…",
          "x-kind": "property"
        },
        "successNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The success field note that appears below the default field note",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success state",
          "x-kind": "property"
        },
        "showCalendar": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        }
      },
      "slots": [
        "fieldNote"
      ],
      "accepts_children": false,
      "extends": "Cre8Field",
      "exemplar": null
    },
    {
      "id": "slot:cre8-date-picker:fieldNote",
      "type": "slot",
      "name": "fieldNote",
      "component": "cre8-date-picker",
      "description": "Container for optional field note content"
    },
    {
      "id": "prop:cre8-date-picker:ariaLive",
      "type": "enum_prop",
      "name": "ariaLive",
      "component": "cre8-date-picker",
      "enum": [
        "polite",
        "assertive"
      ],
      "description": "Controls how the voiceover will experience the new information when field note c…"
    },
    {
      "id": "cre8-field",
      "type": "component",
      "category": "Forms",
      "description": "The Field component renders a form group with label, control, help text and validation styling. There are convenience va…",
      "props": {
        "autocomplete": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Autocomplete attribute that allows input to expect certain types of information.…",
          "x-kind": "attribute"
        },
        "pattern": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Pattern attribute defines a regular expression to validate against input",
          "x-kind": "attribute"
        },
        "placeholder": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The placeholder text that appears inside the input",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": "Label",
          "description": "The required label that appears above the input",
          "x-kind": "attribute"
        },
        "max": {
          "type": [
            "string",
            "number"
          ],
          "enum": null,
          "default": null,
          "description": "The max attribute defines the maximum value that is acceptable and valid for the…",
          "x-kind": "attribute"
        },
        "min": {
          "type": [
            "string",
            "number"
          ],
          "enum": null,
          "default": null,
          "description": "The min attribute defines the minimum value that is acceptable and valid for the…",
          "x-kind": "attribute"
        },
        "maxlength": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The maxlength is an integer above 0 that indicates the maximum allowed character…",
          "x-kind": "attribute"
        },
        "readonly": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Readonly attribute",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": null,
          "default": "text",
          "description": "Type variants - **text** renders a standard text input - **email** renders a tex…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The disabled attribute on the input",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The required attribute on the input",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The unique id of the field <br/><br/> _*This property is dynamically set_",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The text that displays below in text field input",
          "x-kind": "property"
        },
        "ariaLive": {
          "type": "string",
          "enum": [
            "polite",
            "assertive"
          ],
          "default": "polite",
          "description": "Controls how the voiceover will experience the new information when field note c…",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Used to connect the field note in text field to the text menu for accessibility",
          "x-kind": "property"
        },
        "errorText": {
          "type": "string",
          "enum": null,
          "default": "Error",
          "description": "Visually hidden text that always signifies that this is an error for screen read…",
          "x-kind": "property"
        },
        "errorNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The error field note that appears below the default field note",
          "x-kind": "property"
        },
        "validationAriaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Additional aria-describedby connection to id for additional success and error no…",
          "x-kind": "property"
        },
        "successText": {
          "type": "string",
          "enum": null,
          "default": "Success",
          "description": "Visually hidden text that always signifies that this is successful for screen re…",
          "x-kind": "property"
        },
        "successNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The success field note that appears below the default field note",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success state",
          "x-kind": "property"
        }
      },
      "slots": [
        "fieldNote"
      ],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": null
    },
    {
      "id": "slot:cre8-field:fieldNote",
      "type": "slot",
      "name": "fieldNote",
      "component": "cre8-field",
      "description": "Container for optional field note content"
    },
    {
      "id": "prop:cre8-field:ariaLive",
      "type": "enum_prop",
      "name": "ariaLive",
      "component": "cre8-field",
      "enum": [
        "polite",
        "assertive"
      ],
      "description": "Controls how the voiceover will experience the new information when field note c…"
    },
    {
      "id": "cre8-field-note",
      "type": "component",
      "category": "Forms",
      "description": "Field Note gives direction on how to fill out a form field and to alert users of form errors and successes. It’s used be…",
      "props": {
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success",
          "x-kind": "property"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "DEPRECATED: Icon name used for the icon before to the field note",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-form",
      "type": "component",
      "category": "Forms",
      "description": "The form component groups form-associated Cre8 controls, aggregates their validation on submit, and orchestrates submit …",
      "props": {
        "novalidate": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Skips aggregate validation on submit.",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disables every control in the form, for example while submitting.",
          "x-kind": "attribute"
        },
        "controls": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Every form-associated Cre8 control owned by this form, in document order. Reache…",
          "x-kind": "property"
        },
        "values": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The form's current values, derived from FormData.",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": null,
      "exemplar": null
    },
    {
      "id": "cre8-multi-select",
      "type": "component",
      "category": "Forms",
      "description": "Multiselect is used when multiple options can be chosen from a static dropdown This component has a list of items in the…",
      "props": {
        "items": {
          "type": "array",
          "enum": null,
          "default": "[]",
          "description": "The list of string items the user can choose in the dropdown Note: For passing p…",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The required label that appears above the multiselect",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The disabled attribute on the select",
          "x-kind": "attribute"
        },
        "preselectedItems": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "The list of string items that are initially in the selected list of tags Note: T…",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The unique id of the select",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Optional field note text can be added to provide additional field guidance.",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Used to connect the field note in text field to the text menu for accessibility",
          "x-kind": "property"
        },
        "validationAriaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Additional aria-describedby connection to id for additional success and error no…",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error state",
          "x-kind": "property"
        },
        "errorNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The error field note that appears below the default field note",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success state",
          "x-kind": "property"
        },
        "successNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The success field note that appears below the default field note",
          "x-kind": "property"
        },
        "selectedTagItems": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "dropdownOpen": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        }
      },
      "slots": [
        "fieldNote"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-multi-select:fieldNote",
      "type": "slot",
      "name": "fieldNote",
      "component": "cre8-multi-select",
      "description": "Container for optional field note content"
    },
    {
      "id": "cre8-radio-field",
      "type": "component",
      "category": "Forms",
      "description": "Radio Field is the parent container for `radio-field-item`. It is required to allow for grouping numerous radio fields t…",
      "props": {
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Radio field legend label",
          "x-kind": "attribute"
        },
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Options for a data-driven radio field. Each becomes a `cre8-radio-field-item` sh…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Form control name shared by every generated option.",
          "x-kind": "attribute"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Radio Field Note",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Radio container fieldnote aria describe by",
          "x-kind": "property"
        },
        "fieldNoteIconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Radio container fieldnote icon name",
          "x-kind": "property"
        },
        "fieldNoteKnockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Radio container fieldnote knockout",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Radio container fieldnote isSuccess",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Radio container fieldnote isError",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-radio-field-item",
      "type": "component",
      "category": "Forms",
      "description": "A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several options. Do…",
      "props": {
        "checked": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "A Boolean attribute which, if present, sets the radio button as selected.",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The label attribute is used to assign a value to the label element corresponding…",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The Boolean disabled attribute, when present, makes the element not mutable, foc…",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Required attribute",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Identifies the element that provides a detailed, extended description for the ob…",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The fieldId attribute is assigned to the HTML input element of the radio button …",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "A FieldNote can be placed to provide guidance. It's frequently used to in the co…",
          "x-kind": "property"
        },
        "fieldNoteIconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Sets the item fieldnote icon. - **check** renders a badge with success state tre…",
          "x-kind": "property"
        },
        "fieldNoteKnockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Radio item fieldnote knockout",
          "x-kind": "property"
        },
        "fieldNoteIsError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Sets the error state of the fieldnote.",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The isError attribute is used to indicate an error state related to the radio bu…",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The isSuccess attribute is used to indicate a success state related to the radio…",
          "x-kind": "property"
        },
        "type": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The type of form control (text, checkbox, radio, etc.)",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": null
    },
    {
      "id": "cre8-select",
      "type": "component",
      "category": "Forms",
      "description": "The Select control is designed and built to be used for selecting between choices in a form. It is not a Dropdown contro…",
      "props": {
        "items": {
          "type": "array",
          "enum": null,
          "default": "[]",
          "description": "A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions: - Cre8SelectOpt…",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": "Label",
          "description": "The required label that appears above the select",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The disabled attribute on the select",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "The required attribute on the select",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The unique id of the select",
          "x-kind": "property"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Optional field note text can be added to provide additional field guidance.",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Used to connect the field note in text field to the text menu for accessibility",
          "x-kind": "property"
        },
        "validationAriaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Additional aria-describedby connection to id for additional success and error no…",
          "x-kind": "property"
        },
        "errorNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The error field note that appears below the default field note",
          "x-kind": "property"
        },
        "successNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The success field note that appears below the default field note",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent an error state",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Changes the component's treatment to represent a success state",
          "x-kind": "property"
        },
        "type": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The type of form control (text, checkbox, radio, etc.)",
          "x-kind": "property"
        }
      },
      "slots": [
        "fieldNote"
      ],
      "accepts_children": false,
      "extends": null,
      "exemplar": null
    },
    {
      "id": "slot:cre8-select:fieldNote",
      "type": "slot",
      "name": "fieldNote",
      "component": "cre8-select",
      "description": "Container for optional field note content"
    },
    {
      "id": "cre8-select-tile",
      "type": "component",
      "category": "Forms",
      "description": "The Select Tile component is a short block of content inside a visual container that can be used in place of checkboxes,…",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "bare",
            "horizontal",
            "horizontal-bare"
          ],
          "default": null,
          "description": "Style variants - **bare** renders a select-tile without a border and without pad…",
          "x-kind": "attribute"
        },
        "align": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Align variants <cre8-text-passage size=\"sm\"> <ul> <li>**center** renders a selec…",
          "x-kind": "attribute"
        },
        "checked": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Checked State. Note: the `checked` attribute sets the `defaultChecked` property,…",
          "x-kind": "attribute"
        },
        "type": {
          "type": "string",
          "enum": [
            "checkbox",
            "radio"
          ],
          "default": "radio",
          "description": "Should this Select Tile behave as a radio button or a checkbox?",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The name of the form field",
          "x-kind": "attribute"
        },
        "disabled": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Disabled State",
          "x-kind": "attribute"
        },
        "required": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Required attribute",
          "x-kind": "attribute"
        },
        "value": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The value of the form field.",
          "x-kind": "attribute"
        },
        "variantBreakToVertical": {
          "type": "string",
          "enum": [
            "sm",
            "lg",
            "none",
            "md",
            "sm-2",
            "xl",
            "xxl"
          ],
          "default": "sm",
          "description": "Which breakpoint, if any, to switch to verticial. Only useful for horizontal var…",
          "x-kind": "property"
        },
        "checkPosition": {
          "type": "string",
          "enum": [
            "none",
            "left",
            "right",
            "top-right"
          ],
          "default": "right",
          "description": "Where does the checkmark or radio button go? It disappears on 'none'. Only top-r…",
          "x-kind": "property"
        },
        "radioVariant": {
          "type": "string",
          "enum": [
            "dot",
            "check"
          ],
          "default": "dot",
          "description": "In radio mode, whether to use the circle with the dot, or the rounded check.",
          "x-kind": "property"
        },
        "fieldId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Select Tile FieldId",
          "x-kind": "property"
        },
        "isError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Error State",
          "x-kind": "property"
        },
        "isSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Radio item fieldnote isSuccess",
          "x-kind": "property"
        },
        "shadowRootOptions": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "defaultChecked": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The default checked state when the element first renders or is reset. Note: the …",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "header",
        "footer",
        "title",
        "body"
      ],
      "accepts_children": false,
      "extends": "Cre8FormElement",
      "exemplar": null
    },
    {
      "id": "slot:cre8-select-tile:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-select-tile",
      "description": "The default slot goes into the center, main part of the Select Tile.\n  Consider using title and body instead."
    },
    {
      "id": "slot:cre8-select-tile:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-select-tile",
      "description": "The top or left part of the Select Tile"
    },
    {
      "id": "slot:cre8-select-tile:footer",
      "type": "slot",
      "name": "footer",
      "component": "cre8-select-tile",
      "description": "The bottom or right part of the Select Tile"
    },
    {
      "id": "slot:cre8-select-tile:title",
      "type": "slot",
      "name": "title",
      "component": "cre8-select-tile",
      "description": "The title part of the Select Tile, use with body slot and\n        instead of the default slot for appropriate typography."
    },
    {
      "id": "slot:cre8-select-tile:body",
      "type": "slot",
      "name": "body",
      "component": "cre8-select-tile",
      "description": "The \"body\" part of the Select Tile, which appears under\n         the title slot and receives apporpriate typography."
    },
    {
      "id": "prop:cre8-select-tile:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-select-tile",
      "enum": [
        "bare",
        "horizontal",
        "horizontal-bare"
      ],
      "description": "Style variants - **bare** renders a select-tile without a border and without pad…"
    },
    {
      "id": "prop:cre8-select-tile:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-select-tile",
      "enum": [
        "checkbox",
        "radio"
      ],
      "description": "Should this Select Tile behave as a radio button or a checkbox?"
    },
    {
      "id": "prop:cre8-select-tile:variantBreakToVertical",
      "type": "enum_prop",
      "name": "variantBreakToVertical",
      "component": "cre8-select-tile",
      "enum": [
        "sm",
        "lg",
        "none",
        "md",
        "sm-2",
        "xl",
        "xxl"
      ],
      "description": "Which breakpoint, if any, to switch to verticial. Only useful for horizontal var…"
    },
    {
      "id": "prop:cre8-select-tile:checkPosition",
      "type": "enum_prop",
      "name": "checkPosition",
      "component": "cre8-select-tile",
      "enum": [
        "none",
        "left",
        "right",
        "top-right"
      ],
      "description": "Where does the checkmark or radio button go? It disappears on 'none'. Only top-r…"
    },
    {
      "id": "prop:cre8-select-tile:radioVariant",
      "type": "enum_prop",
      "name": "radioVariant",
      "component": "cre8-select-tile",
      "enum": [
        "dot",
        "check"
      ],
      "description": "In radio mode, whether to use the circle with the dot, or the rounded check."
    },
    {
      "id": "cre8-select-tile-list",
      "type": "component",
      "category": "Forms",
      "description": "Select Tile List is a container design to hold multiple Select Tile Components.",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "columns",
            "rows"
          ],
          "default": "columns",
          "description": "Whether to show the tiles side by side (columns) or stacked vertically (rows).",
          "x-kind": "attribute"
        },
        "label": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Select Tile container label",
          "x-kind": "attribute"
        },
        "fieldNote": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote",
          "x-kind": "property"
        },
        "ariaDescribedBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote aria describe by",
          "x-kind": "property"
        },
        "fieldNoteIconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote icon name",
          "x-kind": "property"
        },
        "fieldNoteKnockout": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote knockout",
          "x-kind": "property"
        },
        "fieldNoteIsSuccess": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote isSuccess",
          "x-kind": "property"
        },
        "fieldNoteIsError": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Select Tile container fieldnote isError",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-select-tile-list:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-select-tile-list",
      "enum": [
        "columns",
        "rows"
      ],
      "description": "Whether to show the tiles side by side (columns) or stacked vertically (rows)."
    },
    {
      "id": "cre8-band",
      "type": "component",
      "category": "Layout",
      "description": "Band component.",
      "props": {
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Gradient variant <cre8-text-passage size=\"sm\"> <ul> <li>**1** renders the band w…",
          "x-kind": "attribute"
        },
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height variant 1) Sets the height to 100%",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[0]",
        "spec": {
          "component": "cre8-band",
          "props": {
            "variant": "branded"
          },
          "children": [
            {
              "component": "cre8-hero",
              "props": {
                "align": "center",
                "imgSrc": "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?w=1600",
                "imgAlt": "Curated product collection",
                "hasOverlay": true
              },
              "children": [
                {
                  "component": "cre8-heading",
                  "props": {
                    "type": "headline-large",
                    "tagVariant": "h1"
                  },
                  "children": [
                    "Explore Our Collection"
                  ]
                },
                {
                  "component": "cre8-text-passage",
                  "props": {
                    "size": "large"
                  },
                  "children": [
                    "Handpicked items across every category — find exactly what you're looking for."
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-card",
      "type": "component",
      "category": "Layout",
      "description": "The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`. # How to Use 1. …",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "bare",
            "compact",
            "horizontal",
            "horizontal-bare"
          ],
          "default": null,
          "description": "Style variants - **bare** renders a card without a border and without padding ar…",
          "x-kind": "attribute"
        },
        "align": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Alignment variant - **center** renders a card that has center aligned content/te…",
          "x-kind": "attribute"
        },
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height 1) Stretches the card to fill its parent's height and width. Off by …",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "header",
        "footer"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[0].children[0].children[0].children[0]",
        "spec": {
          "component": "cre8-card",
          "props": {
            "variant": "compact"
          },
          "slots": {
            "header": [
              {
                "component": "cre8-heading",
                "props": {
                  "type": "title-default",
                  "tagVariant": "h3"
                },
                "children": [
                  "Request Volume (24h)"
                ]
              }
            ],
            "default": [
              {
                "component": "cre8-chart",
                "props": {
                  "type": "line",
                  "height": 220,
                  "aria-label": "Request volume over the last 24 hours",
                  "show-legend": false,
                  "data": {
                    "labels": [
                      "00h",
                      "01h",
                      "02h",
                      "03h",
                      "04h",
                      "05h",
                      "06h",
                      "07h",
                      "08h",
                      "09h",
                      "10h",
                      "11h",
                      "12h",
                      "13h",
                      "14h",
                      "15h",
                      "16h",
                      "17h",
                      "18h",
                      "19h",
                      "20h",
                      "21h",
                      "22h",
                      "23h"
                    ],
                    "datasets": [
                      {
                        "label": "Requests",
                        "data": [
                          45,
                          32,
                          28,
                          22,
                          18,
                          15,
                          24,
                          67,
                          145,
                          198,
                          234,
                          287,
                          312,
                          298,
                          267,
                          243,
                          289,
                          334,
                          298,
                          254,
                          187,
                          143,
                          98,
                          67
                        ],
                        "fill": true,
                        "tension": 0.4
                      }
                    ]
                  }
                }
              }
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-card:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-card",
      "description": "The card's body content"
    },
    {
      "id": "slot:cre8-card:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-card",
      "description": "(Optional) Content in the card's header"
    },
    {
      "id": "slot:cre8-card:footer",
      "type": "slot",
      "name": "footer",
      "component": "cre8-card",
      "description": "(Optional) Content in the card's footer"
    },
    {
      "id": "prop:cre8-card:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-card",
      "enum": [
        "bare",
        "compact",
        "horizontal",
        "horizontal-bare"
      ],
      "description": "Style variants - **bare** renders a card without a border and without padding ar…"
    },
    {
      "id": "cre8-container",
      "type": "component",
      "category": "Layout",
      "description": "`cre8-container` establishes a CSS containment context so anything slotted inside it - a `cre8-container-grid`, a `cre8-…",
      "props": {
        "type": {
          "type": "string",
          "enum": [
            "inline-size",
            "size",
            "normal"
          ],
          "default": null,
          "description": "Containment type - **inline-size** (default) contains layout, style, and inline …",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Container name 1) Lets `@container <name> (...)` target this container specifica…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": null,
      "exemplar": null
    },
    {
      "id": "prop:cre8-container:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-container",
      "enum": [
        "inline-size",
        "size",
        "normal"
      ],
      "description": "Containment type - **inline-size** (default) contains layout, style, and inline …"
    },
    {
      "id": "cre8-container-grid",
      "type": "component",
      "category": "Layout",
      "description": "`cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to N-across patterns - keyed to this element's own re…",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "side-by-side",
            "2up",
            "3up",
            "1-3up",
            "4up",
            "1-4up",
            "1-2-4up",
            "2-4-6up"
          ],
          "default": null,
          "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…",
          "x-kind": "attribute"
        },
        "gap": {
          "type": "string",
          "enum": [
            "sm",
            "lg",
            "none"
          ],
          "default": null,
          "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…",
          "x-kind": "attribute"
        },
        "break": {
          "type": "string",
          "enum": [
            "faster",
            "slower"
          ],
          "default": null,
          "description": "Break variant - **faster** breaks the grid at a smaller container width than the…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": null,
      "exemplar": null
    },
    {
      "id": "prop:cre8-container-grid:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-container-grid",
      "enum": [
        "side-by-side",
        "2up",
        "3up",
        "1-3up",
        "4up",
        "1-4up",
        "1-2-4up",
        "2-4-6up"
      ],
      "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…"
    },
    {
      "id": "prop:cre8-container-grid:gap",
      "type": "enum_prop",
      "name": "gap",
      "component": "cre8-container-grid",
      "enum": [
        "sm",
        "lg",
        "none"
      ],
      "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…"
    },
    {
      "id": "prop:cre8-container-grid:break",
      "type": "enum_prop",
      "name": "break",
      "component": "cre8-container-grid",
      "enum": [
        "faster",
        "slower"
      ],
      "description": "Break variant - **faster** breaks the grid at a smaller container width than the…"
    },
    {
      "id": "cre8-divider",
      "type": "component",
      "category": "Layout",
      "description": "The divider component is a separator between sections of content or groups of items. It often contains a horizontal or v…",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "horizontal",
            "vertical"
          ],
          "default": "horizontal",
          "description": "Divider variants - By default, the component renders the horizontal divider - **…",
          "x-kind": "attribute"
        },
        "status": {
          "type": "string",
          "enum": [
            "brand",
            "knockout"
          ],
          "default": null,
          "description": "Status (a color variant prop) - By default, the divider has gray color. - **bran…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[3]",
        "spec": {
          "component": "cre8-divider"
        }
      }
    },
    {
      "id": "prop:cre8-divider:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-divider",
      "enum": [
        "horizontal",
        "vertical"
      ],
      "description": "Divider variants - By default, the component renders the horizontal divider - **…"
    },
    {
      "id": "prop:cre8-divider:status",
      "type": "enum_prop",
      "name": "status",
      "component": "cre8-divider",
      "enum": [
        "brand",
        "knockout"
      ],
      "description": "Status (a color variant prop) - By default, the divider has gray color. - **bran…"
    },
    {
      "id": "cre8-grid",
      "type": "component",
      "category": "Layout",
      "description": "Grid component.",
      "props": {
        "variant": {
          "type": "string",
          "enum": [
            "side-by-side",
            "2up",
            "3up",
            "1-3up",
            "4up",
            "1-4up",
            "1-2-4up",
            "2-4-6up"
          ],
          "default": null,
          "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…",
          "x-kind": "attribute"
        },
        "gap": {
          "type": "string",
          "enum": [
            "sm",
            "lg",
            "none"
          ],
          "default": null,
          "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…",
          "x-kind": "attribute"
        },
        "break": {
          "type": "string",
          "enum": [
            "faster",
            "slower"
          ],
          "default": null,
          "description": "Break variant - **faster** breaks the grid at a smaller width than the default. …",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[0].children[0]",
        "spec": {
          "component": "cre8-grid",
          "props": {
            "variant": "2up",
            "gap": "lg"
          },
          "children": [
            {
              "component": "cre8-grid-item",
              "children": [
                {
                  "component": "cre8-card",
                  "props": {
                    "variant": "compact"
                  },
                  "slots": {
                    "header": [
                      {
                        "component": "cre8-heading",
                        "props": {
                          "type": "title-default",
                          "tagVariant": "h3"
                        },
                        "children": [
                          "Request Volume (24h)"
                        ]
                      }
                    ],
                    "default": [
                      {
                        "component": "cre8-chart",
                        "props": {
                          "type": "line",
                          "height": 220,
                          "aria-label": "Request volume over the last 24 hours",
                          "show-legend": false,
                          "data": {
                            "labels": [
                              "00h",
                              "01h",
                              "02h",
                              "03h",
                              "04h",
                              "05h",
                              "06h",
                              "07h",
                              "08h",
                              "09h",
                              "10h",
                              "11h",
                              "12h",
                              "13h",
                              "14h",
                              "15h",
                              "16h",
                              "17h",
                              "18h",
                              "19h",
                              "20h",
                              "21h",
                              "22h",
                              "23h"
                            ],
                            "datasets": [
                              {
                                "label": "Requests",
                                "data": [
                                  45,
                                  32,
                                  28,
                                  22,
                                  18,
                                  15,
                                  24,
                                  67,
                                  145,
                                  198,
                                  234,
                                  287,
                                  312,
                                  298,
                                  267,
                                  243,
                                  289,
                                  334,
                                  298,
                                  254,
                                  187,
                                  143,
                                  98,
                                  67
                                ],
                                "fill": true,
                                "tension": 0.4
                              }
                            ]
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            },
            {
              "component": "cre8-grid-item",
              "children": [
                {
                  "component": "cre8-card",
                  "props": {
                    "variant": "compact"
                  },
                  "slots": {
                    "header": [
                      {
                        "component": "cre8-heading",
                        "props": {
                          "type": "title-default",
                          "tagVariant": "h3"
                        },
                        "children": [
                          "Traffic by Model"
                        ]
                      }
                    ],
                    "default": [
                      {
                        "component": "cre8-chart",
                        "props": {
                          "type": "doughnut",
                          "height": 220,
                          "aria-label": "Request distribution by model",
                          "legend-position": "bottom",
                          "data": {
                            "labels": [
                              "claude-3-5-sonnet",
                              "gpt-4o",
                              "gemini-1.5-pro",
                              "gpt-4o-mini"
                            ],
                            "datasets": [
                              {
                                "data": [
                                  41,
                                  34,
                                  15,
                                  10
                                ]
                              }
                            ]
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "prop:cre8-grid:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-grid",
      "enum": [
        "side-by-side",
        "2up",
        "3up",
        "1-3up",
        "4up",
        "1-4up",
        "1-2-4up",
        "2-4-6up"
      ],
      "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…"
    },
    {
      "id": "prop:cre8-grid:gap",
      "type": "enum_prop",
      "name": "gap",
      "component": "cre8-grid",
      "enum": [
        "sm",
        "lg",
        "none"
      ],
      "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…"
    },
    {
      "id": "prop:cre8-grid:break",
      "type": "enum_prop",
      "name": "break",
      "component": "cre8-grid",
      "enum": [
        "faster",
        "slower"
      ],
      "description": "Break variant - **faster** breaks the grid at a smaller width than the default. …"
    },
    {
      "id": "cre8-grid-item",
      "type": "component",
      "category": "Layout",
      "description": "Grid Item component.",
      "props": {
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height 1) Stretches the item to fill the height of its row. Off by default …",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/portfolio.json",
        "path": "$.children[3].children[1].children[0]",
        "spec": {
          "component": "cre8-grid-item",
          "children": [
            {
              "component": "cre8-tag",
              "props": {
                "text": "TypeScript",
                "variant": "branded",
                "shape": "round"
              }
            }
          ]
        }
      }
    },
    {
      "id": "cre8-hero",
      "type": "component",
      "category": "Layout",
      "description": "Hero component.",
      "props": {
        "align": {
          "type": "string",
          "enum": [
            "center",
            "left",
            "right",
            "top-left",
            "top-center",
            "bottom-center",
            "top-right",
            "bottom-right"
          ],
          "default": null,
          "description": "Position variant. Bottom left is the default position <cre8-text-passage size=\"s…",
          "x-kind": "attribute"
        },
        "imgSrc": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Image source",
          "x-kind": "property"
        },
        "imgAlt": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Image alt text",
          "x-kind": "property"
        },
        "hasOverlay": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Renders a dark overlay between the background image and the content for legibili…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[0].children[0]",
        "spec": {
          "component": "cre8-hero",
          "props": {
            "align": "center",
            "imgSrc": "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?w=1600",
            "imgAlt": "Curated product collection",
            "hasOverlay": true
          },
          "children": [
            {
              "component": "cre8-heading",
              "props": {
                "type": "headline-large",
                "tagVariant": "h1"
              },
              "children": [
                "Explore Our Collection"
              ]
            },
            {
              "component": "cre8-text-passage",
              "props": {
                "size": "large"
              },
              "children": [
                "Handpicked items across every category — find exactly what you're looking for."
              ]
            }
          ]
        }
      }
    },
    {
      "id": "prop:cre8-hero:align",
      "type": "enum_prop",
      "name": "align",
      "component": "cre8-hero",
      "enum": [
        "center",
        "left",
        "right",
        "top-left",
        "top-center",
        "bottom-center",
        "top-right",
        "bottom-right"
      ],
      "description": "Position variant. Bottom left is the default position <cre8-text-passage size=\"s…"
    },
    {
      "id": "cre8-layout",
      "type": "component",
      "category": "Layout",
      "description": "Layout component.",
      "props": {
        "variant": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Style variants <cre8-text-passage size=\"sm\"> <ul> <li>Default is a right sidebar…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-layout-container",
      "type": "component",
      "category": "Layout",
      "description": "Layout Container component.",
      "props": {
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height variant 1) Sets the height to 100%",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[0].children[0]",
        "spec": {
          "component": "cre8-layout-container",
          "children": [
            {
              "component": "cre8-heading",
              "props": {
                "type": "headline-default",
                "tagVariant": "h1"
              },
              "children": [
                "LLM Observability"
              ]
            },
            {
              "component": "cre8-text-passage",
              "children": [
                "Real-time monitoring across models, costs, and performance — last updated 14:24:01"
              ]
            },
            {
              "component": "cre8-button-group",
              "props": {
                "gap": "sm"
              },
              "children": [
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "Last 24h",
                    "variant": "secondary",
                    "size": "sm"
                  }
                },
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "7 Days",
                    "variant": "tertiary",
                    "size": "sm"
                  }
                },
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "30 Days",
                    "variant": "tertiary",
                    "size": "sm"
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-layout-section",
      "type": "component",
      "category": "Layout",
      "description": "Layout Section component.",
      "props": {
        "behavior": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Behavioral variants - **sticky** allows the layout section to stick to the scree…",
          "x-kind": "attribute"
        },
        "top": {
          "type": "string",
          "enum": null,
          "default": "1rem",
          "description": "Top style 1) Used to create dynamic sticky containers that can be adjusted based…",
          "x-kind": "attribute"
        },
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height 1) Stretches the section to fill the height of its row in `cre8-layo…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/portfolio.json",
        "path": "$.children[1]",
        "spec": {
          "component": "cre8-layout-section",
          "children": [
            {
              "component": "cre8-heading",
              "props": {
                "type": "headline-large",
                "tagVariant": "h2"
              },
              "children": [
                "About"
              ]
            },
            {
              "component": "cre8-text-passage",
              "children": [
                "Ten years designing and building across the stack: Lit web components, Next.js, Supabase, and whatever Anthropic ships next. I like making the AI do the boring parts so I can focus on what a thing should feel like."
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-linelength-container",
      "type": "component",
      "category": "Layout",
      "description": "Linelength Container component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-main",
      "type": "component",
      "category": "Layout",
      "description": "Main component.",
      "props": {
        "fullHeight": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Full height variant 1) Sets the height to 100%",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-section",
      "type": "component",
      "category": "Layout",
      "description": "The section component acts as a block level HTML element that takes a 'headline' property that renders the section's hea…",
      "props": {
        "headline": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The Headline will be rendered as the Section Headline with the correct brand sty…",
          "x-kind": "attribute"
        }
      },
      "slots": [
        "default",
        "header"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-section:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-section",
      "description": "The content of the section should go here.\nIt could be a cre8-text-passage, a cre8-card or any other block level html."
    },
    {
      "id": "slot:cre8-section:header",
      "type": "slot",
      "name": "header",
      "component": "cre8-section",
      "description": "Custom header content, rendered in place of the `headline` property"
    },
    {
      "id": "cre8-feature",
      "type": "component",
      "category": "Marketing",
      "description": "Feature component.",
      "props": {
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "imgSrc": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Image source",
          "x-kind": "property"
        },
        "imgAlt": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Image alt text",
          "x-kind": "property"
        },
        "aspectRatio": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "CSS aspect-ratio for the image (e.g. \"4/3\", \"16/9\", \"1\"). Defaults to natural im…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[1].children[0].children[0].children[0].slots.header[0]",
        "spec": {
          "component": "cre8-feature",
          "props": {
            "imgSrc": "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400",
            "imgAlt": "Minimalist Watch",
            "aspectRatio": "4/3"
          }
        }
      }
    },
    {
      "id": "cre8-page-header",
      "type": "component",
      "category": "Marketing",
      "description": "Page Header component.",
      "props": {
        "heading": {
          "type": "string",
          "enum": null,
          "default": "Page header title",
          "description": "Page header title",
          "x-kind": "attribute"
        }
      },
      "slots": [
        "default",
        "titleAfter"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-page-header:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-page-header",
      "description": "The page header content"
    },
    {
      "id": "slot:cre8-page-header:titleAfter",
      "type": "slot",
      "name": "titleAfter",
      "component": "cre8-page-header",
      "description": "Content rendered after the heading text, inside the title element"
    },
    {
      "id": "cre8-icon",
      "type": "component",
      "category": "Media",
      "description": "<svg> is a web component, which can be used with any frontend framework and use any svg. It takes raw svgs as props and …",
      "props": {
        "focusable": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Focusable",
          "x-kind": "attribute"
        },
        "name": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Icon name (this method of passing in svgs is to be deprecated)",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Raw SVG markup to render. Preferred over `name`/sprite-path icons.",
          "x-kind": "attribute"
        },
        "iconUrl": {
          "type": "string",
          "enum": null,
          "default": "iconSprite",
          "description": "Icon path 1) This points to the file where the icon sprite lives 2) This method …",
          "x-kind": "property"
        },
        "iconTitle": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Icon Title, this string is used for the aira-label of the svg",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-logo",
      "type": "component",
      "category": "Media",
      "description": "Logo component.",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Logo link",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-breadcrumbs",
      "type": "component",
      "category": "Navigation",
      "description": "The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located. The …",
      "props": {
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Crumbs for a data-driven trail. Each becomes a `cre8-breadcrumbs-item`, wrapping…",
          "x-kind": "attribute"
        },
        "navAriaLabel": {
          "type": "string",
          "enum": null,
          "default": "breadcrumbs",
          "description": "aria-label attribute to designate at name for the nav. Can be override by user",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[14]",
        "spec": {
          "component": "cre8-breadcrumbs",
          "props": {
            "navAriaLabel": "Breadcrumb"
          },
          "children": [
            {
              "component": "cre8-breadcrumbs-item",
              "children": [
                {
                  "component": "cre8-text-link",
                  "props": {
                    "href": "/docs"
                  },
                  "slots": {
                    "default": [
                      "Docs"
                    ]
                  }
                }
              ]
            },
            {
              "component": "cre8-breadcrumbs-item",
              "children": [
                "Streaming UI"
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-breadcrumbs-item",
      "type": "component",
      "category": "Navigation",
      "description": "Breadcrumbs Item component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[14].children[1]",
        "spec": {
          "component": "cre8-breadcrumbs-item",
          "children": [
            "Streaming UI"
          ]
        }
      }
    },
    {
      "id": "cre8-footer",
      "type": "component",
      "category": "Navigation",
      "description": "Footer component.",
      "props": {},
      "slots": [
        "default",
        "top",
        "bottom"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-footer:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-footer",
      "description": "The footer content"
    },
    {
      "id": "slot:cre8-footer:top",
      "type": "slot",
      "name": "top",
      "component": "cre8-footer",
      "description": "The top content (above the default slot)"
    },
    {
      "id": "slot:cre8-footer:bottom",
      "type": "slot",
      "name": "bottom",
      "component": "cre8-footer",
      "description": "The bottom content (below the default slot)"
    },
    {
      "id": "cre8-global-nav",
      "type": "component",
      "category": "Navigation",
      "description": "Global Nav component.",
      "props": {
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "behavior": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Behavior variant <cre8-text-passage size=\"sm\"> <ul> <li>**side-by-side** keeps t…",
          "x-kind": "attribute"
        },
        "navAriaLabel": {
          "type": "string",
          "enum": null,
          "default": "global",
          "description": "aria-label attribute to designate at name for the nav. Can be override by user",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-global-nav-item",
      "type": "component",
      "category": "Navigation",
      "description": "Global Nav Item component.",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": "Nav item",
          "description": "Primary nav item text",
          "x-kind": "attribute"
        },
        "href": {
          "type": "string",
          "enum": null,
          "default": "#",
          "description": "Primary nav item href",
          "x-kind": "attribute"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": "keyboard-arrow-down",
          "description": "Icon name",
          "x-kind": "property"
        },
        "megaMenu": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Append to the class name. Used for passing in utility classes",
          "x-kind": "property"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Append to the class name. Used for passing in utility classes",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "itemBefore",
        "itemAfter"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-global-nav-item:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-global-nav-item",
      "description": "The label for the navigation item"
    },
    {
      "id": "slot:cre8-global-nav-item:itemBefore",
      "type": "slot",
      "name": "itemBefore",
      "component": "cre8-global-nav-item",
      "description": "Content rendered before the item label, such as an icon"
    },
    {
      "id": "slot:cre8-global-nav-item:itemAfter",
      "type": "slot",
      "name": "itemAfter",
      "component": "cre8-global-nav-item",
      "description": "Content rendered after the item label, such as an icon"
    },
    {
      "id": "cre8-header",
      "type": "component",
      "category": "Navigation",
      "description": "Header component.",
      "props": {
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Is active state 1) Set to true when small screen menu is open",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "top",
        "bottom"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-header:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-header",
      "description": "The header content"
    },
    {
      "id": "slot:cre8-header:top",
      "type": "slot",
      "name": "top",
      "component": "cre8-header",
      "description": "Content rendered above the main header row"
    },
    {
      "id": "slot:cre8-header:bottom",
      "type": "slot",
      "name": "bottom",
      "component": "cre8-header",
      "description": "Content rendered below the main header row"
    },
    {
      "id": "cre8-link",
      "type": "component",
      "category": "Navigation",
      "description": "Link Component are strictly used in the case where the component will take the user away from the current page to a new …",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Href attribute of the anchor tag",
          "x-kind": "attribute"
        },
        "rel": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Rel attribute of the anchor tag",
          "x-kind": "attribute"
        },
        "target": {
          "type": "string",
          "enum": [
            "_blank",
            "_self",
            "_parent",
            "_top"
          ],
          "default": null,
          "description": "Target attribute for a link (i.e. set to _blank to open in new tab) - **_blank**…",
          "x-kind": "attribute"
        },
        "svg": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "svg as a raw string - For links with icon, the icon is defined by this prop. - P…",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "sm",
            "lg"
          ],
          "default": null,
          "description": "Size variant (default is medium) - **sm** shrinks the link typography and overal…",
          "x-kind": "attribute"
        },
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted colors Link (onDark)",
          "x-kind": "attribute"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "DEPRECATED: Icon name, use svg instead",
          "x-kind": "property"
        },
        "iconRotateDegree": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "iconRotateDegree is used for <cre8-icon> to set the arrow in the correct directi…",
          "x-kind": "property"
        },
        "iconFlipDirection": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "iconFlipDirection is used for <cre8-icon> to set the icon in the correct directi…",
          "x-kind": "property"
        },
        "iconPosition": {
          "type": "string",
          "enum": [
            "before",
            "after"
          ],
          "default": "undefined",
          "description": "Icon position - **before** places the icon before the button text - **after** pl…",
          "x-kind": "property"
        },
        "ctaIcon": {
          "type": "string",
          "enum": null,
          "default": "arrow-forward",
          "description": "Call To Action Icon",
          "x-kind": "property"
        },
        "ctaLink": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Call To Action Link",
          "x-kind": "property"
        },
        "noUnderline": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Link with no underline",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "badge"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-link:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-link",
      "description": "The link text content"
    },
    {
      "id": "slot:cre8-link:badge",
      "type": "slot",
      "name": "badge",
      "component": "cre8-link",
      "description": "Container for an optional badge displayed alongside the link"
    },
    {
      "id": "prop:cre8-link:target",
      "type": "enum_prop",
      "name": "target",
      "component": "cre8-link",
      "enum": [
        "_blank",
        "_self",
        "_parent",
        "_top"
      ],
      "description": "Target attribute for a link (i.e. set to _blank to open in new tab) - **_blank**…"
    },
    {
      "id": "prop:cre8-link:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-link",
      "enum": [
        "sm",
        "lg"
      ],
      "description": "Size variant (default is medium) - **sm** shrinks the link typography and overal…"
    },
    {
      "id": "prop:cre8-link:iconPosition",
      "type": "enum_prop",
      "name": "iconPosition",
      "component": "cre8-link",
      "enum": [
        "before",
        "after"
      ],
      "description": "Icon position - **before** places the icon before the button text - **after** pl…"
    },
    {
      "id": "cre8-link-list",
      "type": "component",
      "category": "Navigation",
      "description": "Link List component.",
      "props": {
        "behavior": {
          "type": "string",
          "enum": [
            "horizontal",
            "responsive"
          ],
          "default": null,
          "description": "Behavioral variant - **responsive** renders a horizontal wrapping link list that…",
          "x-kind": "attribute"
        },
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1. Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Size variants - **sm** renders a link list with a smaller typography",
          "x-kind": "attribute"
        },
        "spacing": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Spacing between link list items - **condensed** renders a link list with a more …",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "secondary",
            "display"
          ],
          "default": null,
          "description": "Style variants - **secondary** renders a link list with a more subtle visual tre…",
          "x-kind": "attribute"
        },
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Links for a data-driven list. Each becomes a `cre8-link-list-item`. Worth knowin…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[10]",
        "spec": {
          "component": "cre8-link-list",
          "props": {
            "behavior": "responsive"
          },
          "children": [
            {
              "component": "cre8-link-list-item",
              "props": {
                "href": "/docs/kb"
              },
              "slots": {
                "default": [
                  "Knowledge base"
                ]
              }
            },
            {
              "component": "cre8-link-list-item",
              "props": {
                "href": "/a2ui/catalog"
              },
              "slots": {
                "default": [
                  "A2UI catalog"
                ]
              }
            }
          ]
        }
      }
    },
    {
      "id": "prop:cre8-link-list:behavior",
      "type": "enum_prop",
      "name": "behavior",
      "component": "cre8-link-list",
      "enum": [
        "horizontal",
        "responsive"
      ],
      "description": "Behavioral variant - **responsive** renders a horizontal wrapping link list that…"
    },
    {
      "id": "prop:cre8-link-list:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-link-list",
      "enum": [
        "secondary",
        "display"
      ],
      "description": "Style variants - **secondary** renders a link list with a more subtle visual tre…"
    },
    {
      "id": "cre8-link-list-item",
      "type": "component",
      "category": "Navigation",
      "description": "Link List Item component.",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The link text",
          "x-kind": "attribute"
        },
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The link URL",
          "x-kind": "attribute"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Active link",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "itemBefore",
        "itemAfter"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[10].children[0]",
        "spec": {
          "component": "cre8-link-list-item",
          "props": {
            "href": "/docs/kb"
          },
          "slots": {
            "default": [
              "Knowledge base"
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-link-list-item:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-link-list-item",
      "description": "The default slot to put badges or other Components"
    },
    {
      "id": "slot:cre8-link-list-item:itemBefore",
      "type": "slot",
      "name": "itemBefore",
      "component": "cre8-link-list-item",
      "description": "Content rendered before the link text, such as an icon"
    },
    {
      "id": "slot:cre8-link-list-item:itemAfter",
      "type": "slot",
      "name": "itemAfter",
      "component": "cre8-link-list-item",
      "description": "Content rendered after the link text, such as an icon"
    },
    {
      "id": "cre8-nav-container",
      "type": "component",
      "category": "Navigation",
      "description": "Nav Container component.",
      "props": {},
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-pagination",
      "type": "component",
      "category": "Navigation",
      "description": "The Pagination component is used to split up a large amount of results by showing only a certain amount on each page. Yo…",
      "props": {
        "display": {
          "type": "string",
          "enum": [
            "compact",
            "icon-only",
            "default"
          ],
          "default": null,
          "description": "(optional) prop that allows for a compact and icon-only variant both for mobile …",
          "x-kind": "attribute"
        },
        "totalResults": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Input the total number of elements are returned from consuming app e.g. search r…",
          "x-kind": "property"
        },
        "pageSize": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "how many elements will displayVariant per page, indicated by business to typical…",
          "x-kind": "property"
        },
        "visiblePages": {
          "type": "number",
          "enum": null,
          "default": 5,
          "description": "Controls how many page buttons are displayVarianted on the page at once, if cont…",
          "x-kind": "property"
        },
        "hideLastAndFirstButtons": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "currentPage": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "The currently active page (1-based). Setting it programmatically navigates the p…",
          "x-kind": "property"
        },
        "elementDefinitions": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "windowWidth": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "buttons": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "maxVisiblePages": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-pagination:display",
      "type": "enum_prop",
      "name": "display",
      "component": "cre8-pagination",
      "enum": [
        "compact",
        "icon-only",
        "default"
      ],
      "description": "(optional) prop that allows for a compact and icon-only variant both for mobile …"
    },
    {
      "id": "cre8-primary-nav",
      "type": "component",
      "category": "Navigation",
      "description": "Primary Nav component.",
      "props": {
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "behavior": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Behavior variant <cre8-text-passage size=\"sm\"> <ul> <li>**side-by-side** keeps t…",
          "x-kind": "attribute"
        },
        "navAriaLabel": {
          "type": "string",
          "enum": null,
          "default": "main",
          "description": "aria-label attribute to designate at name for the nav. Can be override by user",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-primary-nav-item",
      "type": "component",
      "category": "Navigation",
      "description": "Primary Nav Item component.",
      "props": {
        "text": {
          "type": "string",
          "enum": null,
          "default": "Nav item",
          "description": "Primary nav item text",
          "x-kind": "attribute"
        },
        "href": {
          "type": "string",
          "enum": null,
          "default": "#",
          "description": "Primary nav item href",
          "x-kind": "attribute"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": "caret-down",
          "description": "Icon name",
          "x-kind": "property"
        },
        "megaMenu": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Append to the class name. Used for passing in utility classes",
          "x-kind": "property"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Append to the class name. Used for passing in utility classes",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "itemBefore",
        "itemAfter"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "slot:cre8-primary-nav-item:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-primary-nav-item",
      "description": "The label for the navigation item"
    },
    {
      "id": "slot:cre8-primary-nav-item:itemBefore",
      "type": "slot",
      "name": "itemBefore",
      "component": "cre8-primary-nav-item",
      "description": "Content rendered before the item label, such as an icon"
    },
    {
      "id": "slot:cre8-primary-nav-item:itemAfter",
      "type": "slot",
      "name": "itemAfter",
      "component": "cre8-primary-nav-item",
      "description": "Content rendered after the item label, such as an icon"
    },
    {
      "id": "cre8-tab",
      "type": "component",
      "category": "Navigation",
      "description": "Tab component.",
      "props": {
        "size": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Tab sizes - **default** displays the tab text with cre8-typography-label-default…",
          "x-kind": "attribute"
        },
        "index": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Used to align the tab with the tab panel _*This property is dynamically set_",
          "x-kind": "attribute"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "If is true, tab has active state and cooresponding tab panel is visible. _*This …",
          "x-kind": "property"
        },
        "ariaLabelledBy": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Used to connect tab trigger and tab panel for accessibility _*This property is d…",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.default[0]",
        "spec": {
          "component": "cre8-tab",
          "children": [
            "Overview"
          ]
        }
      }
    },
    {
      "id": "cre8-tab-panel",
      "type": "component",
      "category": "Navigation",
      "description": "Tab Panel component.",
      "props": {
        "index": {
          "type": "number",
          "enum": null,
          "default": null,
          "description": "Used to align the tab panel with the tab <br/><br/> _*This property is dynamical…",
          "x-kind": "attribute"
        },
        "skipFocusOnPanel": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "This will remove focus on panel element",
          "x-kind": "property"
        },
        "isActive": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Indicates if the panel is active <br/><br/> _*This property is dynamically set_",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2].slots.panel[0]",
        "spec": {
          "component": "cre8-tab-panel",
          "props": {
            "index": 0
          },
          "children": [
            {
              "component": "cre8-grid",
              "props": {
                "variant": "2up",
                "gap": "lg"
              },
              "children": [
                {
                  "component": "cre8-grid-item",
                  "children": [
                    {
                      "component": "cre8-card",
                      "props": {
                        "variant": "compact"
                      },
                      "slots": {
                        "header": [
                          {
                            "component": "cre8-heading",
                            "props": {
                              "type": "title-default",
                              "tagVariant": "h3"
                            },
                            "children": [
                              "Request Volume (24h)"
                            ]
                          }
                        ],
                        "default": [
                          {
                            "component": "cre8-chart",
                            "props": {
                              "type": "line",
                              "height": 220,
                              "aria-label": "Request volume over the last 24 hours",
                              "show-legend": false,
                              "data": {
                                "labels": [
                                  "00h",
                                  "01h",
                                  "02h",
                                  "03h",
                                  "04h",
                                  "05h",
                                  "06h",
                                  "07h",
                                  "08h",
                                  "09h",
                                  "10h",
                                  "11h",
                                  "12h",
                                  "13h",
                                  "14h",
                                  "15h",
                                  "16h",
                                  "17h",
                                  "18h",
                                  "19h",
                                  "20h",
                                  "21h",
                                  "22h",
                                  "23h"
                                ],
                                "datasets": [
                                  {
                                    "label": "Requests",
                                    "data": [
                                      45,
                                      32,
                                      28,
                                      22,
                                      18,
                                      15,
                                      24,
                                      67,
                                      145,
                                      198,
                                      234,
                                      287,
                                      312,
                                      298,
                                      267,
                                      243,
                                      289,
                                      334,
                                      298,
                                      254,
                                      187,
                                      143,
                                      98,
                                      67
                                    ],
                                    "fill": true,
                                    "tension": 0.4
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  ]
                },
                {
                  "component": "cre8-grid-item",
                  "children": [
                    {
                      "component": "cre8-card",
                      "props": {
                        "variant": "compact"
                      },
                      "slots": {
                        "header": [
                          {
                            "component": "cre8-heading",
                            "props": {
                              "type": "title-default",
                              "tagVariant": "h3"
                            },
                            "children": [
                              "Traffic by Model"
                            ]
                          }
                        ],
                        "default": [
                          {
                            "component": "cre8-chart",
                            "props": {
                              "type": "doughnut",
                              "height": 220,
                              "aria-label": "Request distribution by model",
                              "legend-position": "bottom",
                              "data": {
                                "labels": [
                                  "claude-3-5-sonnet",
                                  "gpt-4o",
                                  "gemini-1.5-pro",
                                  "gpt-4o-mini"
                                ],
                                "datasets": [
                                  {
                                    "data": [
                                      41,
                                      34,
                                      15,
                                      10
                                    ]
                                  }
                                ]
                              }
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              ]
            },
            {
              "component": "cre8-grid",
              "props": {
                "variant": "2up",
                "gap": "lg"
              },
              "children": [
                {
                  "component": "cre8-grid-item",
                  "children": [
                    {
                      "component": "cre8-card",
                      "props": {
                        "variant": "compact"
                      },
                      "slots": {
                        "header": [
                          {
                            "component": "cre8-heading",
                            "props": {
                              "type": "title-default",
                              "tagVariant": "h3"
                            },
                            "children": [
                              "Latency Percentiles by Model"
                            ]
                          }
                        ],
                        "default": [
                          {
                            "component": "cre8-chart",
                            "props": {
                              "type": "bar",
                              "height": 220,
                              "aria-label": "P50/P95/P99 latency by model in seconds",
                              "legend-position": "bottom",
                              "data": {
                                "labels": [
                                  "claude-3-5-sonnet",
                                  "gpt-4o",
                                  "gemini-1.5-pro",
                                  "gpt-4o-mini"
                                ],
                                "datasets": [
                                  {
                                    "label": "P50",
                                    "data": [
                                      0.92,
                                      1.45,
                                      1.12,
                                      0.52
                                    ]
                                  },
                                  {
                                    "label": "P95",
                                    "data": [
                                      2.1,
                                      3.4,
                                      2.8,
                                      1.2
                                    ]
                                  },
                                  {
                                    "label": "P99",
                                    "data": [
                                      3.7,
                                      5.8,
                                      4.2,
                                      2.1
                                    ]
                                  }
                                ]
                              },
                              "options": {
                                "scales": {
                                  "y": {
                                    "title": {
                                      "display": true,
                                      "text": "Latency (s)"
                                    }
                                  }
                                }
                              }
                            }
                          }
                        ]
                      }
                    }
                  ]
                },
                {
                  "component": "cre8-grid-item",
                  "children": [
                    {
                      "component": "cre8-card",
                      "props": {
                        "variant": "compact"
                      },
                      "slots": {
                        "header": [
                          {
                            "component": "cre8-heading",
                            "props": {
                              "type": "title-default",
                              "tagVariant": "h3"
                            },
                            "children": [
                              "Cost Trend (7 days)"
                            ]
                          }
                        ],
                        "default": [
                          {
                            "component": "cre8-chart",
                            "props": {
                              "type": "bar",
                              "height": 220,
                              "aria-label": "Daily cost by model over the last 7 days",
                              "legend-position": "bottom",
                              "data": {
                                "labels": [
                                  "Apr 24",
                                  "Apr 25",
                                  "Apr 26",
                                  "Apr 27",
                                  "Apr 28",
                                  "Apr 29",
                                  "Apr 30"
                                ],
                                "datasets": [
                                  {
                                    "label": "claude-3-5-sonnet",
                                    "data": [
                                      11.2,
                                      12.8,
                                      13.1,
                                      14.5,
                                      13.9,
                                      15.2,
                                      14.8
                                    ]
                                  },
                                  {
                                    "label": "gpt-4o",
                                    "data": [
                                      14.3,
                                      15.7,
                                      16.2,
                                      17.1,
                                      18.4,
                                      17.8,
                                      18.3
                                    ]
                                  },
                                  {
                                    "label": "gemini-1.5-pro",
                                    "data": [
                                      3.2,
                                      3.8,
                                      4.1,
                                      4.5,
                                      3.9,
                                      4.2,
                                      3.87
                                    ]
                                  },
                                  {
                                    "label": "gpt-4o-mini",
                                    "data": [
                                      0.9,
                                      1.1,
                                      1.3,
                                      1.4,
                                      1.2,
                                      1.5,
                                      1.39
                                    ]
                                  }
                                ]
                              },
                              "options": {
                                "scales": {
                                  "x": {
                                    "stacked": true
                                  },
                                  "y": {
                                    "stacked": true,
                                    "title": {
                                      "display": true,
                                      "text": "Cost ($)"
                                    }
                                  }
                                }
                              }
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "cre8-tabs",
      "type": "component",
      "category": "Navigation",
      "description": "Tabs are used to quickly navigate back and forth between views. The Tab design and interaction varies depending on the r…",
      "props": {
        "size": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Tab sizes - **default** displays the cre8-tab text with cre8-typography-label-de…",
          "x-kind": "attribute"
        },
        "items": {
          "type": "array",
          "enum": null,
          "default": null,
          "description": "Tabs for a data-driven tab set. Each entry becomes a `cre8-tab` in the default s…",
          "x-kind": "attribute"
        },
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Displays a set of tabs with a spanning the width of the element",
          "x-kind": "property"
        },
        "activeIndex": {
          "type": "number",
          "enum": null,
          "default": 0,
          "description": "Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, e…",
          "x-kind": "property"
        },
        "isStart": {
          "type": "boolean",
          "enum": null,
          "default": true,
          "description": "If position from left is greater than 0, set isStart to false. Otherwise set isS…",
          "x-kind": "property"
        },
        "isEnd": {
          "type": "boolean",
          "enum": null,
          "default": false,
          "description": "If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd …",
          "x-kind": "property"
        },
        "activeTab": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The active tab _*This property is dynamically set_",
          "x-kind": "property"
        },
        "isRTL": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Query the document direction value _*This property is dynamically set_",
          "x-kind": "property"
        },
        "handleScroll": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "handleResize": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "setIsStart": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "setIsEnd": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "emitEvent": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": null,
          "x-kind": "property"
        },
        "tabId": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Auto Increment id to sync tab and tab panel _*This property is dynamically set_",
          "x-kind": "property"
        }
      },
      "slots": [
        "default",
        "panel"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/llm-observability.json",
        "path": "$.children[1].children[2]",
        "spec": {
          "component": "cre8-tabs",
          "slots": {
            "default": [
              {
                "component": "cre8-tab",
                "children": [
                  "Overview"
                ]
              },
              {
                "component": "cre8-tab",
                "children": [
                  "Models"
                ]
              },
              {
                "component": "cre8-tab",
                "children": [
                  "Requests"
                ]
              }
            ],
            "panel": [
              {
                "component": "cre8-tab-panel",
                "props": {
                  "index": 0
                },
                "children": [
                  {
                    "component": "cre8-grid",
                    "props": {
                      "variant": "2up",
                      "gap": "lg"
                    },
                    "children": [
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Request Volume (24h)"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "line",
                                    "height": 220,
                                    "aria-label": "Request volume over the last 24 hours",
                                    "show-legend": false,
                                    "data": {
                                      "labels": [
                                        "00h",
                                        "01h",
                                        "02h",
                                        "03h",
                                        "04h",
                                        "05h",
                                        "06h",
                                        "07h",
                                        "08h",
                                        "09h",
                                        "10h",
                                        "11h",
                                        "12h",
                                        "13h",
                                        "14h",
                                        "15h",
                                        "16h",
                                        "17h",
                                        "18h",
                                        "19h",
                                        "20h",
                                        "21h",
                                        "22h",
                                        "23h"
                                      ],
                                      "datasets": [
                                        {
                                          "label": "Requests",
                                          "data": [
                                            45,
                                            32,
                                            28,
                                            22,
                                            18,
                                            15,
                                            24,
                                            67,
                                            145,
                                            198,
                                            234,
                                            287,
                                            312,
                                            298,
                                            267,
                                            243,
                                            289,
                                            334,
                                            298,
                                            254,
                                            187,
                                            143,
                                            98,
                                            67
                                          ],
                                          "fill": true,
                                          "tension": 0.4
                                        }
                                      ]
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Traffic by Model"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "doughnut",
                                    "height": 220,
                                    "aria-label": "Request distribution by model",
                                    "legend-position": "bottom",
                                    "data": {
                                      "labels": [
                                        "claude-3-5-sonnet",
                                        "gpt-4o",
                                        "gemini-1.5-pro",
                                        "gpt-4o-mini"
                                      ],
                                      "datasets": [
                                        {
                                          "data": [
                                            41,
                                            34,
                                            15,
                                            10
                                          ]
                                        }
                                      ]
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "component": "cre8-grid",
                    "props": {
                      "variant": "2up",
                      "gap": "lg"
                    },
                    "children": [
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Latency Percentiles by Model"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "bar",
                                    "height": 220,
                                    "aria-label": "P50/P95/P99 latency by model in seconds",
                                    "legend-position": "bottom",
                                    "data": {
                                      "labels": [
                                        "claude-3-5-sonnet",
                                        "gpt-4o",
                                        "gemini-1.5-pro",
                                        "gpt-4o-mini"
                                      ],
                                      "datasets": [
                                        {
                                          "label": "P50",
                                          "data": [
                                            0.92,
                                            1.45,
                                            1.12,
                                            0.52
                                          ]
                                        },
                                        {
                                          "label": "P95",
                                          "data": [
                                            2.1,
                                            3.4,
                                            2.8,
                                            1.2
                                          ]
                                        },
                                        {
                                          "label": "P99",
                                          "data": [
                                            3.7,
                                            5.8,
                                            4.2,
                                            2.1
                                          ]
                                        }
                                      ]
                                    },
                                    "options": {
                                      "scales": {
                                        "y": {
                                          "title": {
                                            "display": true,
                                            "text": "Latency (s)"
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Cost Trend (7 days)"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "bar",
                                    "height": 220,
                                    "aria-label": "Daily cost by model over the last 7 days",
                                    "legend-position": "bottom",
                                    "data": {
                                      "labels": [
                                        "Apr 24",
                                        "Apr 25",
                                        "Apr 26",
                                        "Apr 27",
                                        "Apr 28",
                                        "Apr 29",
                                        "Apr 30"
                                      ],
                                      "datasets": [
                                        {
                                          "label": "claude-3-5-sonnet",
                                          "data": [
                                            11.2,
                                            12.8,
                                            13.1,
                                            14.5,
                                            13.9,
                                            15.2,
                                            14.8
                                          ]
                                        },
                                        {
                                          "label": "gpt-4o",
                                          "data": [
                                            14.3,
                                            15.7,
                                            16.2,
                                            17.1,
                                            18.4,
                                            17.8,
                                            18.3
                                          ]
                                        },
                                        {
                                          "label": "gemini-1.5-pro",
                                          "data": [
                                            3.2,
                                            3.8,
                                            4.1,
                                            4.5,
                                            3.9,
                                            4.2,
                                            3.87
                                          ]
                                        },
                                        {
                                          "label": "gpt-4o-mini",
                                          "data": [
                                            0.9,
                                            1.1,
                                            1.3,
                                            1.4,
                                            1.2,
                                            1.5,
                                            1.39
                                          ]
                                        }
                                      ]
                                    },
                                    "options": {
                                      "scales": {
                                        "x": {
                                          "stacked": true
                                        },
                                        "y": {
                                          "stacked": true,
                                          "title": {
                                            "display": true,
                                            "text": "Cost ($)"
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "component": "cre8-tab-panel",
                "props": {
                  "index": 1
                },
                "children": [
                  {
                    "component": "cre8-heading",
                    "props": {
                      "type": "title-default",
                      "tagVariant": "h3"
                    },
                    "children": [
                      "API Rate Limits"
                    ]
                  },
                  {
                    "component": "cre8-grid",
                    "props": {
                      "variant": "3up",
                      "gap": "lg"
                    },
                    "children": [
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-text-passage",
                                  "props": {
                                    "size": "small"
                                  },
                                  "children": [
                                    "OpenAI — TPM Usage"
                                  ]
                                },
                                {
                                  "component": "cre8-progress-meter",
                                  "props": {
                                    "value": 78,
                                    "max": 100,
                                    "status": "warning",
                                    "label": "78 / 100 TPM"
                                  }
                                },
                                {
                                  "component": "cre8-badge",
                                  "props": {
                                    "text": "78% utilized",
                                    "status": "warning"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-text-passage",
                                  "props": {
                                    "size": "small"
                                  },
                                  "children": [
                                    "Anthropic — TPM Usage"
                                  ]
                                },
                                {
                                  "component": "cre8-progress-meter",
                                  "props": {
                                    "value": 45,
                                    "max": 100,
                                    "label": "45 / 100 TPM"
                                  }
                                },
                                {
                                  "component": "cre8-badge",
                                  "props": {
                                    "text": "45% utilized",
                                    "status": "info"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-text-passage",
                                  "props": {
                                    "size": "small"
                                  },
                                  "children": [
                                    "Google — TPM Usage"
                                  ]
                                },
                                {
                                  "component": "cre8-progress-meter",
                                  "props": {
                                    "value": 23,
                                    "max": 100,
                                    "status": "success",
                                    "label": "23 / 100 TPM"
                                  }
                                },
                                {
                                  "component": "cre8-badge",
                                  "props": {
                                    "text": "23% utilized",
                                    "status": "success"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "component": "cre8-heading",
                    "props": {
                      "type": "title-default",
                      "tagVariant": "h3"
                    },
                    "children": [
                      "Model Performance"
                    ]
                  },
                  {
                    "component": "cre8-table",
                    "props": {
                      "caption": "Model performance statistics for the last 24 hours",
                      "variant": "striped"
                    },
                    "children": [
                      {
                        "component": "cre8-table-header",
                        "children": [
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Model"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Requests"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Tokens"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Avg Latency"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Cost"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Error Rate"
                                  ]
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-table-body",
                        "children": [
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "claude-3-5-sonnet"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "5,267"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.72M"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.92s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$14.82"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "0.2%",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "4,368"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.43M"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.45s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$18.34"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "0.5%",
                                        "status": "info"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gemini-1.5-pro"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1,927"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.63M"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.12s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$3.87"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "0.8%",
                                        "status": "warning"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o-mini"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1,285"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.42M"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.52s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$1.39"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "0.3%",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "component": "cre8-tab-panel",
                "props": {
                  "index": 2
                },
                "children": [
                  {
                    "component": "cre8-grid",
                    "props": {
                      "variant": "2up",
                      "gap": "lg"
                    },
                    "children": [
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Token Efficiency"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "bar",
                                    "height": 200,
                                    "aria-label": "Prompt vs completion tokens by model",
                                    "legend-position": "bottom",
                                    "data": {
                                      "labels": [
                                        "claude-3-5-sonnet",
                                        "gpt-4o",
                                        "gemini-1.5-pro",
                                        "gpt-4o-mini"
                                      ],
                                      "datasets": [
                                        {
                                          "label": "Prompt Tokens",
                                          "data": [
                                            1120000,
                                            930000,
                                            410000,
                                            275000
                                          ]
                                        },
                                        {
                                          "label": "Completion Tokens",
                                          "data": [
                                            600000,
                                            500000,
                                            220000,
                                            145000
                                          ]
                                        }
                                      ]
                                    },
                                    "options": {
                                      "scales": {
                                        "x": {
                                          "stacked": true
                                        },
                                        "y": {
                                          "stacked": true
                                        }
                                      }
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-grid-item",
                        "children": [
                          {
                            "component": "cre8-card",
                            "props": {
                              "variant": "compact"
                            },
                            "slots": {
                              "header": [
                                {
                                  "component": "cre8-heading",
                                  "props": {
                                    "type": "title-default",
                                    "tagVariant": "h3"
                                  },
                                  "children": [
                                    "Error Rate (24h)"
                                  ]
                                }
                              ],
                              "default": [
                                {
                                  "component": "cre8-chart",
                                  "props": {
                                    "type": "line",
                                    "height": 200,
                                    "aria-label": "Error rate over 24 hours",
                                    "show-legend": false,
                                    "data": {
                                      "labels": [
                                        "00h",
                                        "02h",
                                        "04h",
                                        "06h",
                                        "08h",
                                        "10h",
                                        "12h",
                                        "14h",
                                        "16h",
                                        "18h",
                                        "20h",
                                        "22h"
                                      ],
                                      "datasets": [
                                        {
                                          "label": "Error Rate %",
                                          "data": [
                                            0.1,
                                            0.2,
                                            0.1,
                                            0.3,
                                            0.4,
                                            0.6,
                                            0.8,
                                            1.2,
                                            0.9,
                                            0.5,
                                            0.3,
                                            0.4
                                          ],
                                          "fill": true,
                                          "tension": 0.4
                                        }
                                      ]
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "component": "cre8-heading",
                    "props": {
                      "type": "title-default",
                      "tagVariant": "h3"
                    },
                    "children": [
                      "Recent Requests"
                    ]
                  },
                  {
                    "component": "cre8-table",
                    "props": {
                      "caption": "Recent LLM requests",
                      "variant": "striped"
                    },
                    "children": [
                      {
                        "component": "cre8-table-header",
                        "children": [
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Time"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Model"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Prompt"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Completion"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Latency"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Cost"
                                  ]
                                },
                                {
                                  "component": "cre8-table-header-cell",
                                  "children": [
                                    "Status"
                                  ]
                                }
                              ]
                            }
                          }
                        ]
                      },
                      {
                        "component": "cre8-table-body",
                        "children": [
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:23:45"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "claude-3-5-sonnet"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "847"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "400"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.92s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.013"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:23:12"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "512"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "320"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.45s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.018"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:22:58"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gemini-1.5-pro"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1,203"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "901"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.12s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.006"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:22:31"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "234"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "—"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "2.87s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.000"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "Error",
                                        "status": "error"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:22:15"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "claude-3-5-sonnet"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "634"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "353"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.78s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.010"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:21:59"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o-mini"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "445"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "398"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "0.51s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.001"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:21:43"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "claude-3-5-sonnet"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1,102"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "567"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.14s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.017"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          },
                          {
                            "component": "cre8-table-row",
                            "slots": {
                              "default": [
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "14:21:28"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "gpt-4o"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "782"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "418"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "1.67s"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    "$0.021"
                                  ]
                                },
                                {
                                  "component": "cre8-table-cell",
                                  "children": [
                                    {
                                      "component": "cre8-badge",
                                      "props": {
                                        "text": "OK",
                                        "status": "success"
                                      }
                                    }
                                  ]
                                }
                              ]
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-tabs:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-tabs",
      "description": "Default, unnamed slot container for each `cre8-tab` button"
    },
    {
      "id": "slot:cre8-tabs:panel",
      "type": "slot",
      "name": "panel",
      "component": "cre8-tabs",
      "description": "Container for each `cre8-tab-panel` content item"
    },
    {
      "id": "cre8-tertiary-nav",
      "type": "component",
      "category": "Navigation",
      "description": "Tertiary Nav component.",
      "props": {
        "fullWidth": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Allows the tertiary nav to take up the full width of it parent container",
          "x-kind": "property"
        },
        "navAriaLabel": {
          "type": "string",
          "enum": null,
          "default": "tertiary",
          "description": "aria-label attribute to designate at name for the nav. Can be override by user",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-tertiary-nav-item",
      "type": "component",
      "category": "Navigation",
      "description": "Tertiary Nav Item component.",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The href value of the tertiary nav link",
          "x-kind": "attribute"
        },
        "isCurrent": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "The current state of the tertiary nav link",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-utility-nav",
      "type": "component",
      "category": "Navigation",
      "description": "Utility Nav component.",
      "props": {
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "navAriaLabel": {
          "type": "string",
          "enum": null,
          "default": "utility",
          "description": "aria-label attribute to designate at name for the nav. Can be override by user",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "cre8-utility-nav-item",
      "type": "component",
      "category": "Navigation",
      "description": "Utility Nav Item component.",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "URL of the utility nav item",
          "x-kind": "attribute"
        },
        "text": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Text of the utility nav item",
          "x-kind": "attribute"
        },
        "hideText": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Hide text toggle 1) Visually hides the text so screenreaders can still read for …",
          "x-kind": "property"
        },
        "iconName": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Icon name",
          "x-kind": "property"
        },
        "iconPosition": {
          "type": "string",
          "enum": [
            "before",
            "after"
          ],
          "default": "undefined",
          "description": "Icon position <cre8-text-passage size=\"sm\"> <ul> <li>**before** places the icon …",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": null
    },
    {
      "id": "prop:cre8-utility-nav-item:iconPosition",
      "type": "enum_prop",
      "name": "iconPosition",
      "component": "cre8-utility-nav-item",
      "enum": [
        "before",
        "after"
      ],
      "description": "Icon position <cre8-text-passage size=\"sm\"> <ul> <li>**before** places the icon …"
    },
    {
      "id": "cre8-heading",
      "type": "component",
      "category": "Typography",
      "description": "HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6 is the …",
      "props": {
        "type": {
          "type": "string",
          "enum": [
            "display-default",
            "display-small",
            "headline-large",
            "headline-default",
            "headline-small",
            "title-xlarge",
            "title-large",
            "title-default",
            "title-small",
            "label-large",
            "label-default",
            "label-small",
            "meta-large",
            "meta-default",
            "meta-small"
          ],
          "default": null,
          "description": "Heading type <cre8-text-passage size=\"small\"> <ul> <li>**display-default** rende…",
          "x-kind": "attribute"
        },
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Invert the color of the font from dark to light. An inverted `heading` should be…",
          "x-kind": "attribute"
        },
        "tagVariant": {
          "type": "string",
          "enum": [
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "h6"
          ],
          "default": "h5",
          "description": "Dynamic tag name for the component 1) This is needed to use proper semantic head…",
          "x-kind": "property"
        },
        "brandColor": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Apply the brand color to the heading text.",
          "x-kind": "property"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[0].children[0].children[0]",
        "spec": {
          "component": "cre8-heading",
          "props": {
            "type": "headline-large",
            "tagVariant": "h1"
          },
          "children": [
            "Explore Our Collection"
          ]
        }
      }
    },
    {
      "id": "prop:cre8-heading:type",
      "type": "enum_prop",
      "name": "type",
      "component": "cre8-heading",
      "enum": [
        "display-default",
        "display-small",
        "headline-large",
        "headline-default",
        "headline-small",
        "title-xlarge",
        "title-large",
        "title-default",
        "title-small",
        "label-large",
        "label-default",
        "label-small",
        "meta-large",
        "meta-default",
        "meta-small"
      ],
      "description": "Heading type <cre8-text-passage size=\"small\"> <ul> <li>**display-default** rende…"
    },
    {
      "id": "prop:cre8-heading:tagVariant",
      "type": "enum_prop",
      "name": "tagVariant",
      "component": "cre8-heading",
      "enum": [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6"
      ],
      "description": "Dynamic tag name for the component 1) This is needed to use proper semantic head…"
    },
    {
      "id": "cre8-text-link",
      "type": "component",
      "category": "Typography",
      "description": "Text Link component.",
      "props": {
        "href": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "The link URL",
          "x-kind": "attribute"
        },
        "variant": {
          "type": "string",
          "enum": [
            "secondary",
            "display"
          ],
          "default": null,
          "description": "Style variant <cre8-text-passage size=\"sm\"> <ul> <li> **display** applies displa…",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": null,
          "default": null,
          "description": "Size variant <cre8-text-passage size=\"sm\"> <ul> <li> **sm** renders a smaller ty…",
          "x-kind": "attribute"
        },
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        }
      },
      "slots": [
        "default",
        "linkAfter"
      ],
      "accepts_children": false,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/compound-families.json",
        "path": "$.children[14].children[0].children[0]",
        "spec": {
          "component": "cre8-text-link",
          "props": {
            "href": "/docs"
          },
          "slots": {
            "default": [
              "Docs"
            ]
          }
        }
      }
    },
    {
      "id": "slot:cre8-text-link:default",
      "type": "slot",
      "name": "default",
      "component": "cre8-text-link",
      "description": "The component content"
    },
    {
      "id": "slot:cre8-text-link:linkAfter",
      "type": "slot",
      "name": "linkAfter",
      "component": "cre8-text-link",
      "description": "Content rendered after the link text, such as an icon"
    },
    {
      "id": "prop:cre8-text-link:variant",
      "type": "enum_prop",
      "name": "variant",
      "component": "cre8-text-link",
      "enum": [
        "secondary",
        "display"
      ],
      "description": "Style variant <cre8-text-passage size=\"sm\"> <ul> <li> **display** applies displa…"
    },
    {
      "id": "cre8-text-passage",
      "type": "component",
      "category": "Typography",
      "description": "The text-passage component acts a general wrapper element for any text content that needs to be used in your project. # …",
      "props": {
        "inverted": {
          "type": "boolean",
          "enum": null,
          "default": null,
          "description": "Inverted variant 1) Used for dark backgrounds",
          "x-kind": "attribute"
        },
        "size": {
          "type": "string",
          "enum": [
            "large",
            "small",
            "default"
          ],
          "default": "default",
          "description": "Size variant - **small** renders smaller typography than the default variant - *…",
          "x-kind": "attribute"
        }
      },
      "slots": [],
      "accepts_children": true,
      "extends": "Cre8Element",
      "exemplar": {
        "source": "a2ui/examples/card-gallery.json",
        "path": "$.children[0].children[0].children[1]",
        "spec": {
          "component": "cre8-text-passage",
          "props": {
            "size": "large"
          },
          "children": [
            "Handpicked items across every category — find exactly what you're looking for."
          ]
        }
      }
    },
    {
      "id": "prop:cre8-text-passage:size",
      "type": "enum_prop",
      "name": "size",
      "component": "cre8-text-passage",
      "enum": [
        "large",
        "small",
        "default"
      ],
      "description": "Size variant - **small** renders smaller typography than the default variant - *…"
    },
    {
      "id": "pattern:alert-banner",
      "type": "pattern",
      "name": "Alert Banner",
      "description": "Dismissible alert at top of page. The message is slots.default; a call to action goes in slots.cta.",
      "source": "a2ui/patterns/alert-banner.json",
      "spec": {
        "component": "cre8-alert",
        "props": {
          "status": "info",
          "variant": "banner"
        },
        "slots": {
          "default": [
            "Important announcement message here."
          ]
        }
      },
      "components": [
        "cre8-alert"
      ]
    },
    {
      "id": "pattern:data-table",
      "type": "pattern",
      "name": "Data Table",
      "description": "Table with header and data rows. Every level is required: cells live in rows, rows in a header or body, header and body in the table. A table that skips a level renders, and is wrong.",
      "source": "a2ui/patterns/data-table.json",
      "spec": {
        "component": "cre8-table",
        "props": {
          "variant": "striped",
          "isHoverable": true
        },
        "children": [
          {
            "component": "cre8-table-header",
            "children": [
              {
                "component": "cre8-table-row",
                "slots": {
                  "default": [
                    {
                      "component": "cre8-table-header-cell",
                      "children": [
                        "Name"
                      ]
                    },
                    {
                      "component": "cre8-table-header-cell",
                      "children": [
                        "Status"
                      ]
                    }
                  ]
                }
              }
            ]
          },
          {
            "component": "cre8-table-body",
            "children": [
              {
                "component": "cre8-table-row",
                "slots": {
                  "default": [
                    {
                      "component": "cre8-table-cell",
                      "children": [
                        "Item 1"
                      ]
                    },
                    {
                      "component": "cre8-table-cell",
                      "children": [
                        {
                          "component": "cre8-badge",
                          "props": {
                            "text": "Active",
                            "status": "success"
                          }
                        }
                      ]
                    }
                  ]
                }
              }
            ]
          }
        ]
      },
      "components": [
        "cre8-badge",
        "cre8-table",
        "cre8-table-body",
        "cre8-table-cell",
        "cre8-table-header",
        "cre8-table-header-cell",
        "cre8-table-row"
      ]
    },
    {
      "id": "pattern:login-form",
      "type": "pattern",
      "name": "Login Form",
      "description": "Standard login form with email and password. Three things make it submit rather than merely look right: a cre8-form (or real <form>) wrapper (cre8 form components participate via ElementInternals, which is inert outside one), type=\"submit\" on the button (cre8-button defaults to type=\"button\"), and a name on every field (setFormValue contributes nothing to FormData without one). Note that required does not block submission on its own — cre8 form elements never map constraint attributes into setValidity, so enforce it with setCustomValidity() or a submit handler.",
      "source": "a2ui/patterns/login-form.json",
      "spec": {
        "component": "cre8-form",
        "children": [
          {
            "component": "cre8-card",
            "slots": {
              "default": [
                {
                  "component": "cre8-heading",
                  "props": {
                    "tagVariant": "h2",
                    "type": "headline-default"
                  },
                  "children": [
                    "Sign In"
                  ]
                },
                {
                  "component": "cre8-field",
                  "props": {
                    "label": "Email",
                    "name": "email",
                    "type": "email",
                    "autocomplete": "email",
                    "required": true
                  }
                },
                {
                  "component": "cre8-field",
                  "props": {
                    "label": "Password",
                    "name": "password",
                    "type": "password",
                    "autocomplete": "current-password",
                    "required": true
                  }
                },
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "Sign In",
                    "variant": "primary",
                    "fullWidth": true,
                    "type": "submit"
                  }
                }
              ]
            }
          }
        ]
      },
      "components": [
        "cre8-button",
        "cre8-card",
        "cre8-field",
        "cre8-form",
        "cre8-heading"
      ]
    },
    {
      "id": "pattern:modal-dialog",
      "type": "pattern",
      "name": "Modal Dialog",
      "description": "Modal with header, body, and footer actions. These buttons are deliberately type=\"button\": they are not in a form, so they do nothing until click handlers are attached — bind events on both before shipping. If the modal instead collects input, wrap the body and footer in a cre8-form and give Confirm type=\"submit\" — see the Login Form pattern. Use ariaLabel, not aria-label: the modal renders its inner role=\"dialog\" label from the ariaLabel property, and a host aria-label attribute leaves that dialog unlabelled.",
      "source": "a2ui/patterns/modal-dialog.json",
      "spec": {
        "component": "cre8-modal",
        "props": {
          "isActive": true,
          "ariaLabel": "Confirmation"
        },
        "slots": {
          "header": [
            "Confirm Action"
          ],
          "default": [
            {
              "component": "cre8-text-passage",
              "children": [
                "Are you sure you want to proceed?"
              ]
            }
          ],
          "footer": [
            {
              "component": "cre8-button-group",
              "children": [
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "Cancel",
                    "variant": "secondary",
                    "type": "button"
                  }
                },
                {
                  "component": "cre8-button",
                  "props": {
                    "text": "Confirm",
                    "variant": "primary",
                    "type": "button"
                  }
                }
              ]
            }
          ]
        }
      },
      "components": [
        "cre8-button",
        "cre8-button-group",
        "cre8-modal",
        "cre8-text-passage"
      ]
    },
    {
      "id": "pattern:page-layout",
      "type": "pattern",
      "name": "Page Layout",
      "description": "Standard page with header, main content, and footer. cre8-global-nav and cre8-footer expose no logo or copyright slot; content addressed to a slot that does not exist is never assigned and renders nowhere, so both go in the default slot.",
      "source": "a2ui/patterns/page-layout.json",
      "spec": {
        "component": "cre8-layout",
        "children": [
          {
            "component": "cre8-header",
            "slots": {
              "default": [
                {
                  "component": "cre8-logo"
                },
                {
                  "component": "cre8-global-nav",
                  "children": [
                    {
                      "component": "cre8-global-nav-item",
                      "props": {
                        "href": "/",
                        "text": "Home"
                      }
                    }
                  ]
                }
              ]
            }
          },
          {
            "component": "cre8-main",
            "children": [
              {
                "component": "cre8-layout-container",
                "children": [
                  {
                    "component": "cre8-text-passage",
                    "children": [
                      "Page content"
                    ]
                  }
                ]
              }
            ]
          },
          {
            "component": "cre8-footer",
            "slots": {
              "default": [
                "2024 Company Name"
              ]
            }
          }
        ]
      },
      "components": [
        "cre8-footer",
        "cre8-global-nav",
        "cre8-global-nav-item",
        "cre8-header",
        "cre8-layout",
        "cre8-layout-container",
        "cre8-logo",
        "cre8-main",
        "cre8-text-passage"
      ]
    },
    {
      "id": "pattern:tabbed-content",
      "type": "pattern",
      "name": "Tabbed Content",
      "description": "Content organized in tabs. cre8-tab has no label, tab-id or selected prop: the label is its text content, and cre8-tabs pairs each tab with the panel at the same position and assigns index/isActive itself. Tabs go in slots.default, panels in slots.panel. Set activeIndex on cre8-tabs to choose the initial tab (defaults to 0).",
      "source": "a2ui/patterns/tabbed-content.json",
      "spec": {
        "component": "cre8-tabs",
        "slots": {
          "default": [
            {
              "component": "cre8-tab",
              "children": [
                "Tab 1"
              ]
            },
            {
              "component": "cre8-tab",
              "children": [
                "Tab 2"
              ]
            }
          ],
          "panel": [
            {
              "component": "cre8-tab-panel",
              "children": [
                "Content for Tab 1"
              ]
            },
            {
              "component": "cre8-tab-panel",
              "children": [
                "Content for Tab 2"
              ]
            }
          ]
        }
      },
      "components": [
        "cre8-tab",
        "cre8-tab-panel",
        "cre8-tabs"
      ]
    }
  ],
  "edges": [
    {
      "from": "cre8-button",
      "to": "cat:Actions",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-button",
      "to": "slot:cre8-button:before",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-button",
      "to": "slot:cre8-button:after",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:target",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:iconPosition",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:ariaLive",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button",
      "to": "prop:cre8-button:splitButtonType",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-button-group",
      "to": "cat:Actions",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-danger-button",
      "to": "cat:Actions",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:target",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:iconPosition",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-danger-button",
      "to": "prop:cre8-danger-button:ariaLive",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-split-button",
      "to": "cat:Actions",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-split-button",
      "to": "prop:cre8-split-button:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-chart",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-chart",
      "to": "prop:cre8-chart:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-chart",
      "to": "prop:cre8-chart:legend-position",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-list",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-list",
      "to": "prop:cre8-list:spacing",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-list-item",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-remove-tag",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-remove-tag",
      "to": "prop:cre8-remove-tag:color",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-remove-tag",
      "to": "prop:cre8-remove-tag:shape",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-table",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-body",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-cell",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-header",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-header-cell",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-object",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-object",
      "to": "slot:cre8-table-object:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-table-object",
      "to": "slot:cre8-table-object:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-table-object",
      "to": "slot:cre8-table-object:footer",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-table-row",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-table-row",
      "to": "slot:cre8-table-row:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-table-row",
      "to": "slot:cre8-table-row:expandableContent",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tag",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tag",
      "to": "prop:cre8-tag:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-tag",
      "to": "prop:cre8-tag:shape",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-tag",
      "to": "prop:cre8-tag:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-tag-list",
      "to": "cat:Data",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-accordion",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-accordion",
      "to": "prop:cre8-accordion:borderType",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-accordion-item",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-accordion-item",
      "to": "slot:cre8-accordion-item:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-accordion-item",
      "to": "slot:cre8-accordion-item:heading",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-accordion-item",
      "to": "prop:cre8-accordion-item:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-accordion-item",
      "to": "prop:cre8-accordion-item:headingTagVariant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-dropdown",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-dropdown-item",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-modal",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-modal",
      "to": "slot:cre8-modal:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-modal",
      "to": "slot:cre8-modal:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-modal",
      "to": "slot:cre8-modal:footer",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-modal",
      "to": "prop:cre8-modal:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-popover",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-popover",
      "to": "slot:cre8-popover:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-popover",
      "to": "slot:cre8-popover:trigger",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-popover",
      "to": "slot:cre8-popover:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-popover",
      "to": "slot:cre8-popover:footer",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-popover",
      "to": "prop:cre8-popover:position",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-submenu",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-submenu-item",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tooltip",
      "to": "cat:Disclosure",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tooltip",
      "to": "slot:cre8-tooltip:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tooltip",
      "to": "slot:cre8-tooltip:trigger",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tooltip",
      "to": "prop:cre8-tooltip:position",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-alert",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-alert",
      "to": "slot:cre8-alert:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-alert",
      "to": "slot:cre8-alert:cta",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-alert",
      "to": "prop:cre8-alert:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-alert",
      "to": "prop:cre8-alert:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-alert",
      "to": "prop:cre8-alert:emphasis",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-badge",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-badge",
      "to": "prop:cre8-badge:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-badge",
      "to": "prop:cre8-badge:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-inline-alert",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-inline-alert",
      "to": "prop:cre8-inline-alert:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-inline-alert",
      "to": "prop:cre8-inline-alert:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-loading-spinner",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-loading-spinner",
      "to": "prop:cre8-loading-spinner:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-loading-spinner",
      "to": "prop:cre8-loading-spinner:buttonVariant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-percent-bar",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-progress-meter",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-progress-meter",
      "to": "prop:cre8-progress-meter:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-progress-steps",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-progress-steps-item",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-progress-steps-item",
      "to": "prop:cre8-progress-steps-item:state",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-skeleton-loader",
      "to": "cat:Feedback",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-skeleton-loader",
      "to": "prop:cre8-skeleton-loader:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-checkbox-field",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-checkbox-field-item",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-checkbox-field-item",
      "to": "slot:cre8-checkbox-field-item:fieldNote",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-date-picker",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-date-picker",
      "to": "slot:cre8-date-picker:fieldNote",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-date-picker",
      "to": "prop:cre8-date-picker:ariaLive",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-field",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-field",
      "to": "slot:cre8-field:fieldNote",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-field",
      "to": "prop:cre8-field:ariaLive",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-field-note",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-form",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-multi-select",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-multi-select",
      "to": "slot:cre8-multi-select:fieldNote",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-radio-field",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-radio-field-item",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-select",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-select",
      "to": "slot:cre8-select:fieldNote",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-select-tile",
      "to": "slot:cre8-select-tile:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "slot:cre8-select-tile:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "slot:cre8-select-tile:footer",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "slot:cre8-select-tile:title",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "slot:cre8-select-tile:body",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-select-tile",
      "to": "prop:cre8-select-tile:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-select-tile",
      "to": "prop:cre8-select-tile:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-select-tile",
      "to": "prop:cre8-select-tile:variantBreakToVertical",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-select-tile",
      "to": "prop:cre8-select-tile:checkPosition",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-select-tile",
      "to": "prop:cre8-select-tile:radioVariant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-select-tile-list",
      "to": "cat:Forms",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-select-tile-list",
      "to": "prop:cre8-select-tile-list:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-band",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-card",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-card",
      "to": "slot:cre8-card:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-card",
      "to": "slot:cre8-card:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-card",
      "to": "slot:cre8-card:footer",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-card",
      "to": "prop:cre8-card:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-container",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-container",
      "to": "prop:cre8-container:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-container-grid",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-container-grid",
      "to": "prop:cre8-container-grid:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-container-grid",
      "to": "prop:cre8-container-grid:gap",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-container-grid",
      "to": "prop:cre8-container-grid:break",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-divider",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-divider",
      "to": "prop:cre8-divider:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-divider",
      "to": "prop:cre8-divider:status",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-grid",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-grid",
      "to": "prop:cre8-grid:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-grid",
      "to": "prop:cre8-grid:gap",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-grid",
      "to": "prop:cre8-grid:break",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-grid-item",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-hero",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-hero",
      "to": "prop:cre8-hero:align",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-layout",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-layout-container",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-layout-section",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-linelength-container",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-main",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-section",
      "to": "cat:Layout",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-section",
      "to": "slot:cre8-section:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-section",
      "to": "slot:cre8-section:header",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-feature",
      "to": "cat:Marketing",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-page-header",
      "to": "cat:Marketing",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-page-header",
      "to": "slot:cre8-page-header:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-page-header",
      "to": "slot:cre8-page-header:titleAfter",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-icon",
      "to": "cat:Media",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-logo",
      "to": "cat:Media",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-breadcrumbs",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-breadcrumbs-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-footer",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-footer",
      "to": "slot:cre8-footer:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-footer",
      "to": "slot:cre8-footer:top",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-footer",
      "to": "slot:cre8-footer:bottom",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-global-nav",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "slot:cre8-global-nav-item:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "slot:cre8-global-nav-item:itemBefore",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "slot:cre8-global-nav-item:itemAfter",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-header",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-header",
      "to": "slot:cre8-header:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-header",
      "to": "slot:cre8-header:top",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-header",
      "to": "slot:cre8-header:bottom",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-link",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-link",
      "to": "slot:cre8-link:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-link",
      "to": "slot:cre8-link:badge",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-link",
      "to": "prop:cre8-link:target",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-link",
      "to": "prop:cre8-link:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-link",
      "to": "prop:cre8-link:iconPosition",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-link-list",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-link-list",
      "to": "prop:cre8-link-list:behavior",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-link-list",
      "to": "prop:cre8-link-list:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-link-list-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-link-list-item",
      "to": "slot:cre8-link-list-item:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-link-list-item",
      "to": "slot:cre8-link-list-item:itemBefore",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-link-list-item",
      "to": "slot:cre8-link-list-item:itemAfter",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-nav-container",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-pagination",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-pagination",
      "to": "prop:cre8-pagination:display",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-primary-nav",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-primary-nav-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-primary-nav-item",
      "to": "slot:cre8-primary-nav-item:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-primary-nav-item",
      "to": "slot:cre8-primary-nav-item:itemBefore",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-primary-nav-item",
      "to": "slot:cre8-primary-nav-item:itemAfter",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tab",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tab-panel",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tabs",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tabs",
      "to": "slot:cre8-tabs:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tabs",
      "to": "slot:cre8-tabs:panel",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-tertiary-nav",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-tertiary-nav-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-utility-nav",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-utility-nav-item",
      "to": "cat:Navigation",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-utility-nav-item",
      "to": "prop:cre8-utility-nav-item:iconPosition",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-heading",
      "to": "cat:Typography",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-heading",
      "to": "prop:cre8-heading:type",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-heading",
      "to": "prop:cre8-heading:tagVariant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-text-link",
      "to": "cat:Typography",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-text-link",
      "to": "slot:cre8-text-link:default",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-text-link",
      "to": "slot:cre8-text-link:linkAfter",
      "rel": "HAS_SLOT"
    },
    {
      "from": "cre8-text-link",
      "to": "prop:cre8-text-link:variant",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-text-passage",
      "to": "cat:Typography",
      "rel": "BELONGS_TO"
    },
    {
      "from": "cre8-text-passage",
      "to": "prop:cre8-text-passage:size",
      "rel": "HAS_ENUM_PROP"
    },
    {
      "from": "cre8-accordion",
      "to": "cre8-accordion-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 5,
      "evidence": [
        {
          "kind": "story",
          "file": "components/accordion/accordion.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-accordion-item",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 2,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-alert",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": "cta",
      "count": 25,
      "evidence": [
        {
          "kind": "story",
          "file": "components/alert/alert.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-alert",
      "to": "cre8-link",
      "rel": "CONTAINS",
      "slot": "cta",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/alert/alert.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-band",
      "to": "cre8-hero",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-band",
      "to": "cre8-layout-container",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-breadcrumbs",
      "to": "cre8-breadcrumbs-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 5,
      "evidence": [
        {
          "kind": "story",
          "file": "components/breadcrumbs/breadcrumbs.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-breadcrumbs-item",
      "to": "cre8-link",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "story",
          "file": "components/breadcrumbs/breadcrumbs.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-breadcrumbs-item",
      "to": "cre8-text-link",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-button",
      "to": "cre8-icon",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "source",
          "file": "components/pagination/pagination.ts"
        }
      ]
    },
    {
      "from": "cre8-button",
      "to": "cre8-icon",
      "rel": "CONTAINS",
      "slot": "before",
      "count": 3,
      "evidence": [
        {
          "kind": "source",
          "file": "components/pagination/pagination.ts"
        }
      ]
    },
    {
      "from": "cre8-button-group",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": null,
      "count": 55,
      "evidence": [
        {
          "kind": "story",
          "file": "components/button-group/button-group.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/select-tile/select-tile.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/modal-dialog.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 22,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 4,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/login-form.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-chart",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 6,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-field",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 2,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/login-form.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 20,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/login-form.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-progress-meter",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 3,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-tag",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 18,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 27,
      "evidence": [
        {
          "kind": "story",
          "file": "components/card/card.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": "footer",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/card/card.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": "footer",
      "count": 15,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": "footer",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/card/card.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-feature",
      "rel": "CONTAINS",
      "slot": "header",
      "count": 15,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        }
      ]
    },
    {
      "from": "cre8-card",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": "header",
      "count": 9,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-checkbox-field",
      "to": "cre8-checkbox-field-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 5,
      "evidence": [
        {
          "kind": "story",
          "file": "components/checkbox-field/checkbox-field.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-dropdown",
      "to": "cre8-dropdown-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 29,
      "evidence": [
        {
          "kind": "story",
          "file": "components/dropdown/dropdown.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/split-button/split-button.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-feature",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "story",
          "file": "components/feature/feature.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-feature",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "story",
          "file": "components/feature/feature.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-field-note",
      "to": "cre8-text-link",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "story",
          "file": "components/field-note/field-note.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-form",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-form",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-form",
      "to": "cre8-card",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/login-form.json"
        }
      ]
    },
    {
      "from": "cre8-form",
      "to": "cre8-field",
      "rel": "CONTAINS",
      "slot": null,
      "count": 6,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-form",
      "to": "cre8-grid",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-global-nav",
      "to": "cre8-global-nav-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-grid",
      "to": "cre8-grid-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 138,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/grid/grid.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-grid-item",
      "to": "cre8-card",
      "rel": "CONTAINS",
      "slot": null,
      "count": 31,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-grid-item",
      "to": "cre8-field",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "story",
          "file": "components/form/form.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-grid-item",
      "to": "cre8-tag",
      "rel": "CONTAINS",
      "slot": null,
      "count": 8,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-header",
      "to": "cre8-global-nav",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-header",
      "to": "cre8-logo",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-heading",
      "to": "cre8-icon",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "source",
          "file": "components/accordion-item/accordion-item.ts"
        }
      ]
    },
    {
      "from": "cre8-hero",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-hero",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 13,
      "evidence": [
        {
          "kind": "story",
          "file": "components/hero/hero.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-hero",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": null,
      "count": 12,
      "evidence": [
        {
          "kind": "story",
          "file": "components/hero/hero.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-inline-alert",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/inline-alert/inline-alert.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-layout",
      "to": "cre8-footer",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-layout",
      "to": "cre8-header",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-layout",
      "to": "cre8-layout-section",
      "rel": "CONTAINS",
      "slot": null,
      "count": 6,
      "evidence": [
        {
          "kind": "story",
          "file": "components/layout/layout.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-layout",
      "to": "cre8-main",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-accordion",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-breadcrumbs",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-checkbox-field",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-divider",
      "rel": "CONTAINS",
      "slot": null,
      "count": 7,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-dropdown",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-link-list",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-list",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-progress-steps",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-tag-list",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-layout-container",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-band",
      "rel": "CONTAINS",
      "slot": null,
      "count": 4,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-divider",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-grid",
      "rel": "CONTAINS",
      "slot": null,
      "count": 5,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 4,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-inline-alert",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-layout-section",
      "rel": "CONTAINS",
      "slot": null,
      "count": 7,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/card-gallery.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/dating-grid.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-tabs",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-layout-section",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/portfolio.json"
        }
      ]
    },
    {
      "from": "cre8-link",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": "badge",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/link/link.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-link-list",
      "to": "cre8-link-list-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 57,
      "evidence": [
        {
          "kind": "story",
          "file": "components/link-list/link-list.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-link-list-item",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": "itemAfter",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/link-list/link-list.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-list",
      "to": "cre8-list-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 18,
      "evidence": [
        {
          "kind": "story",
          "file": "components/list/list.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-main",
      "to": "cre8-layout-container",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/page-layout.json"
        }
      ]
    },
    {
      "from": "cre8-modal",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/modal-dialog.json"
        }
      ]
    },
    {
      "from": "cre8-modal",
      "to": "cre8-button-group",
      "rel": "CONTAINS",
      "slot": "footer",
      "count": 1,
      "evidence": [
        {
          "kind": "pattern",
          "file": "a2ui/patterns/modal-dialog.json"
        }
      ]
    },
    {
      "from": "cre8-page-header",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": "titleAfter",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/page-header/page-header.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-popover",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": "footer",
      "count": 7,
      "evidence": [
        {
          "kind": "story",
          "file": "components/popover/popover.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-popover",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": "trigger",
      "count": 5,
      "evidence": [
        {
          "kind": "story",
          "file": "components/popover/popover.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-primary-nav",
      "to": "cre8-primary-nav-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 6,
      "evidence": [
        {
          "kind": "story",
          "file": "components/primary-nav/primary-nav.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-progress-steps",
      "to": "cre8-progress-steps-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 18,
      "evidence": [
        {
          "kind": "story",
          "file": "components/progress-steps/progress-steps.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-radio-field",
      "to": "cre8-radio-field-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 7,
      "evidence": [
        {
          "kind": "story",
          "file": "components/radio-field-item/radio-field-item.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/radio-field/radio-field.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-section",
      "to": "cre8-button",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/section/section.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-section",
      "to": "cre8-text-passage",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 2,
      "evidence": [
        {
          "kind": "story",
          "file": "components/section/section.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-section",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": "header",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/section/section.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-select",
      "to": "cre8-link",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/select/select.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-select-tile",
      "to": "cre8-icon",
      "rel": "CONTAINS",
      "slot": "header",
      "count": 11,
      "evidence": [
        {
          "kind": "story",
          "file": "components/select-tile/select-tile.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-select-tile-list",
      "to": "cre8-select-tile",
      "rel": "CONTAINS",
      "slot": null,
      "count": 12,
      "evidence": [
        {
          "kind": "story",
          "file": "components/select-tile-list/select-tile-list.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-split-button",
      "to": "cre8-dropdown",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "story",
          "file": "components/split-button/split-button.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-submenu",
      "to": "cre8-submenu-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 4,
      "evidence": [
        {
          "kind": "story",
          "file": "components/submenu/submenu.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-tab-panel",
      "to": "cre8-grid",
      "rel": "CONTAINS",
      "slot": null,
      "count": 4,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-tab-panel",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 3,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-tab-panel",
      "to": "cre8-table",
      "rel": "CONTAINS",
      "slot": null,
      "count": 2,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        }
      ]
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-body",
      "rel": "CONTAINS",
      "slot": null,
      "count": 10,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-header",
      "rel": "CONTAINS",
      "slot": null,
      "count": 10,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table-body",
      "to": "cre8-table-row",
      "rel": "CONTAINS",
      "slot": null,
      "count": 41,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table-cell",
      "to": "cre8-badge",
      "rel": "CONTAINS",
      "slot": null,
      "count": 13,
      "evidence": [
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table-cell",
      "to": "cre8-icon",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "source",
          "file": "components/table-row/table-row.ts"
        }
      ]
    },
    {
      "from": "cre8-table-header",
      "to": "cre8-table-row",
      "rel": "CONTAINS",
      "slot": null,
      "count": 10,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table-object",
      "to": "cre8-table",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-table-row",
      "to": "cre8-table-cell",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 194,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-table-row",
      "to": "cre8-table-header-cell",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 43,
      "evidence": [
        {
          "kind": "story",
          "file": "components/table-object/table-object.stories.ts"
        },
        {
          "kind": "story",
          "file": "components/table/table.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/data-table.json"
        }
      ]
    },
    {
      "from": "cre8-tabs",
      "to": "cre8-tab",
      "rel": "CONTAINS",
      "slot": "default",
      "count": 17,
      "evidence": [
        {
          "kind": "story",
          "file": "components/tabs/tabs.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/tabbed-content.json"
        }
      ]
    },
    {
      "from": "cre8-tabs",
      "to": "cre8-tab-panel",
      "rel": "CONTAINS",
      "slot": "panel",
      "count": 17,
      "evidence": [
        {
          "kind": "story",
          "file": "components/tabs/tabs.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/llm-observability.json"
        },
        {
          "kind": "pattern",
          "file": "a2ui/patterns/tabbed-content.json"
        }
      ]
    },
    {
      "from": "cre8-tag-list",
      "to": "cre8-tag",
      "rel": "CONTAINS",
      "slot": null,
      "count": 19,
      "evidence": [
        {
          "kind": "story",
          "file": "components/tag-list/tag-list.stories.ts"
        },
        {
          "kind": "example",
          "file": "a2ui/examples/compound-families.json"
        }
      ]
    },
    {
      "from": "cre8-tertiary-nav",
      "to": "cre8-tertiary-nav-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 10,
      "evidence": [
        {
          "kind": "story",
          "file": "components/tertiary-nav/tertiary-nav.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-text-passage",
      "to": "cre8-heading",
      "rel": "CONTAINS",
      "slot": null,
      "count": 1,
      "evidence": [
        {
          "kind": "story",
          "file": "components/card/card.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-utility-nav",
      "to": "cre8-utility-nav-item",
      "rel": "CONTAINS",
      "slot": null,
      "count": 4,
      "evidence": [
        {
          "kind": "story",
          "file": "components/utility-nav/utility-nav.stories.ts"
        }
      ]
    },
    {
      "from": "cre8-alert",
      "to": "pattern:alert-banner",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-badge",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table-body",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table-cell",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table-header",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table-header-cell",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-table-row",
      "to": "pattern:data-table",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-button",
      "to": "pattern:login-form",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-card",
      "to": "pattern:login-form",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-field",
      "to": "pattern:login-form",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-form",
      "to": "pattern:login-form",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-heading",
      "to": "pattern:login-form",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-button",
      "to": "pattern:modal-dialog",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-button-group",
      "to": "pattern:modal-dialog",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-modal",
      "to": "pattern:modal-dialog",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-text-passage",
      "to": "pattern:modal-dialog",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-footer",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-global-nav",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-header",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-layout",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-layout-container",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-logo",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-main",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-text-passage",
      "to": "pattern:page-layout",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-tab",
      "to": "pattern:tabbed-content",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-tab-panel",
      "to": "pattern:tabbed-content",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-tabs",
      "to": "pattern:tabbed-content",
      "rel": "USED_IN_PATTERN"
    },
    {
      "from": "cre8-accordion",
      "to": "cre8-accordion-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-breadcrumbs",
      "to": "cre8-breadcrumbs-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-button",
      "to": "cre8-button-group",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-checkbox-field",
      "to": "cre8-checkbox-field-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-container",
      "to": "cre8-container-grid",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-dropdown",
      "to": "cre8-dropdown-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-field",
      "to": "cre8-field-note",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-global-nav",
      "to": "cre8-global-nav-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-grid",
      "to": "cre8-grid-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-layout",
      "to": "cre8-layout-container",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-layout",
      "to": "cre8-layout-section",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-link",
      "to": "cre8-link-list",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-link",
      "to": "cre8-link-list-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-link-list",
      "to": "cre8-link-list-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-list",
      "to": "cre8-list-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-primary-nav",
      "to": "cre8-primary-nav-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-progress-steps",
      "to": "cre8-progress-steps-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-radio-field",
      "to": "cre8-radio-field-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-select",
      "to": "cre8-select-tile",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-select",
      "to": "cre8-select-tile-list",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-select-tile",
      "to": "cre8-select-tile-list",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-submenu",
      "to": "cre8-submenu-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-tab",
      "to": "cre8-tab-panel",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-body",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-cell",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-header",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-header-cell",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-object",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table",
      "to": "cre8-table-row",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-table-header",
      "to": "cre8-table-header-cell",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-tag",
      "to": "cre8-tag-list",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-tertiary-nav",
      "to": "cre8-tertiary-nav-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-utility-nav",
      "to": "cre8-utility-nav-item",
      "rel": "IN_FAMILY"
    },
    {
      "from": "cre8-accordion",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-accordion-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-alert",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-badge",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-band",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-breadcrumbs",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-breadcrumbs-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-button",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-button-group",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-card",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-chart",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-checkbox-field",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-checkbox-field-item",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-danger-button",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-date-picker",
      "to": "class:Cre8Field",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-divider",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-dropdown",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-dropdown-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-feature",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-field",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-field-note",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-footer",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-global-nav",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-global-nav-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-grid",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-grid-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-header",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-heading",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-hero",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-icon",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-inline-alert",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-layout",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-layout-container",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-layout-section",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-linelength-container",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-link",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-link-list",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-link-list-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-list",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-list-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-loading-spinner",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-logo",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-main",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-modal",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-multi-select",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-nav-container",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-page-header",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-pagination",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-percent-bar",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-popover",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-primary-nav",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-primary-nav-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-progress-meter",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-progress-steps",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-progress-steps-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-radio-field",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-radio-field-item",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-remove-tag",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-section",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-select-tile",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-select-tile-list",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-skeleton-loader",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-split-button",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-submenu",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-submenu-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tab",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tab-panel",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-body",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-cell",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-header",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-header-cell",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-object",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-table-row",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tabs",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tag",
      "to": "class:Cre8FormElement",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tag-list",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tertiary-nav",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tertiary-nav-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-text-link",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-text-passage",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-tooltip",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-utility-nav",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-utility-nav-item",
      "to": "class:Cre8Element",
      "rel": "EXTENDS"
    },
    {
      "from": "cre8-accordion-item",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-accordion-item",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-alert",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-alert",
      "to": "cre8-heading",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-alert",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-alert",
      "to": "cre8-link",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-alert",
      "to": "cre8-text-passage",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-badge",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-breadcrumbs-item",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-button",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-button",
      "to": "cre8-loading-spinner",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-checkbox-field",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-checkbox-field-item",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-checkbox-field-item",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-danger-button",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-danger-button",
      "to": "cre8-loading-spinner",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-date-picker",
      "to": "cre8-field",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-field",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-field-note",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-inline-alert",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-modal",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-multi-select",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-multi-select",
      "to": "cre8-checkbox-field-item",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-multi-select",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-multi-select",
      "to": "cre8-remove-tag",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-pagination",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-percent-bar",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-percent-bar",
      "to": "cre8-progress-meter",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-percent-bar",
      "to": "cre8-text-passage",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-popover",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-popover",
      "to": "cre8-heading",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-progress-steps",
      "to": "cre8-progress-steps-item",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-radio-field",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-radio-field-item",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-remove-tag",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-select",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-select-tile",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-select-tile-list",
      "to": "cre8-field-note",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-split-button",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-table-row",
      "to": "cre8-button",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-table-row",
      "to": "cre8-table-cell",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-tabs",
      "to": "cre8-tab",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-tabs",
      "to": "cre8-tab-panel",
      "rel": "IMPORTS"
    },
    {
      "from": "cre8-tag",
      "to": "cre8-icon",
      "rel": "IMPORTS"
    }
  ]
}