@carbon/ibm-products-web-components/custom-elements.json

Carbon for IBM Products Web Components

{
  "version": "experimental",
  "tags": [
    {
      "name": "c4p-about-modal",
      "path": "./src/components/about-modal/about-modal.ts",
      "description": "About Modal.",
      "attributes": [
        {
          "name": "open",
          "description": "Determines if About Modal is open or not.",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "closeIconDescription",
          "description": "Determines if About Modal is open or not.",
          "type": "string",
          "default": "\"close\""
        },
        {
          "name": "copyrightText",
          "description": "Determines if About Modal is open or not."
        },
        {
          "name": "logo",
          "description": "A visual symbol used to represent the product."
        },
        {
          "name": "version",
          "description": "Text that provides information on the version number of your product."
        },
        {
          "name": "title",
          "description": "Header text that provides the product name. The IBM Services logo consists of two discrete, but required, elements: the iconic IBM 8-bar logo represented alongside the IBM Services logotype. Please follow these guidelines to ensure proper execution."
        },
        {
          "name": "additionalInfo",
          "description": "If you are legally required to display logos of technologies used to build your product you can provide this in the additionalInfo. Additional information will be displayed in the footer."
        },
        {
          "name": "content",
          "description": "Subhead text providing any relevant product disclaimers including legal information (optional)"
        },
        {
          "name": "links",
          "description": "An array of Carbon `Link` component if there are additional information to call out within the card. The about modal should be used to display the product information and not where users go to find help (optional)"
        }
      ],
      "properties": [
        {
          "name": "open",
          "attribute": "open",
          "description": "Determines if About Modal is open or not.",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "closeIconDescription",
          "attribute": "closeIconDescription",
          "description": "Determines if About Modal is open or not.",
          "type": "string",
          "default": "\"close\""
        },
        {
          "name": "copyrightText",
          "attribute": "copyrightText",
          "description": "Determines if About Modal is open or not."
        },
        {
          "name": "logo",
          "attribute": "logo",
          "description": "A visual symbol used to represent the product."
        },
        {
          "name": "version",
          "attribute": "version",
          "description": "Text that provides information on the version number of your product."
        },
        {
          "name": "title",
          "attribute": "title",
          "description": "Header text that provides the product name. The IBM Services logo consists of two discrete, but required, elements: the iconic IBM 8-bar logo represented alongside the IBM Services logotype. Please follow these guidelines to ensure proper execution."
        },
        {
          "name": "additionalInfo",
          "attribute": "additionalInfo",
          "description": "If you are legally required to display logos of technologies used to build your product you can provide this in the additionalInfo. Additional information will be displayed in the footer."
        },
        {
          "name": "content",
          "attribute": "content",
          "description": "Subhead text providing any relevant product disclaimers including legal information (optional)"
        },
        {
          "name": "links",
          "attribute": "links",
          "description": "An array of Carbon `Link` component if there are additional information to call out within the card. The about modal should be used to display the product information and not where users go to find help (optional)"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        },
        {
          "name": "size",
          "type": "number"
        }
      ],
      "events": [
        {
          "name": "c4p-about-modal-beingclosed",
          "description": "The custom event fired before this about modal is being closed upon a user gesture.\nCancellation of this event stops the user-initiated action of closing this about modal."
        },
        {
          "name": "c4p-about-modal-closed",
          "description": "The custom event fired after this about modal is closed upon a user gesture."
        }
      ]
    },
    {
      "name": "c4p-action-set",
      "path": "./src/components/action-set/action-set.ts",
      "description": "Action Set component - A specialized button set with validation and ordering logic.\nExtends Carbon's button-set with additional features for action buttons.",
      "attributes": [
        {
          "name": "button-size",
          "description": "The size of buttons to use for the actions.",
          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | undefined"
        },
        {
          "name": "size",
          "description": "The size of the action set. Different button arrangements are used at\ndifferent sizes, to make best use of the available space.",
          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
          "default": "\"md\""
        },
        {
          "name": "disable-stacking",
          "description": "When true, prevents automatic stacking of buttons even when size would\nnormally trigger stacking (e.g., 'sm' size or 'md' with 3+ actions).\nButtons will remain in a horizontal layout.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "actions",
          "description": "Array of action button configurations. When provided, buttons will be\nrendered internally instead of using slotted content.",
          "type": "ActionButton[]",
          "default": "[]"
        }
      ],
      "properties": [
        {
          "name": "stacked",
          "description": "Computed property: `true` if the buttons are currently stacked.\nThis is derived from size, disableStacking, and button count.",
          "type": "boolean"
        },
        {
          "name": "buttonSize",
          "attribute": "button-size",
          "description": "The size of buttons to use for the actions.",
          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | undefined"
        },
        {
          "name": "size",
          "attribute": "size",
          "description": "The size of the action set. Different button arrangements are used at\ndifferent sizes, to make best use of the available space.",
          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
          "default": "\"md\""
        },
        {
          "name": "disableStacking",
          "attribute": "disable-stacking",
          "description": "When true, prevents automatic stacking of buttons even when size would\nnormally trigger stacking (e.g., 'sm' size or 'md' with 3+ actions).\nButtons will remain in a horizontal layout.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "actions",
          "attribute": "actions",
          "description": "Array of action button configurations. When provided, buttons will be\nrendered internally instead of using slotted content.",
          "type": "ActionButton[]",
          "default": "[]"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Slot for cds-button elements (used when actions prop is not provided)"
        }
      ]
    },
    {
      "name": "c4p-add-select-body",
      "path": "./src/components/add-select/add-select-body.ts",
      "description": "Add Select Body component - contains the main content area",
      "attributes": [
        {
          "name": "items-label",
          "description": "Label for items section",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "global-search-label",
          "description": "Global search label",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "global-search-placeholder",
          "description": "Global search placeholder",
          "type": "string",
          "default": "\"Search\""
        },
        {
          "name": "search-results-title",
          "description": "No results title",
          "type": "string",
          "default": "\"Search results\""
        },
        {
          "name": "item-count",
          "description": "Item count for display",
          "type": "number",
          "default": "0"
        },
        {
          "name": "path",
          "description": "Navigation path for breadcrumbs",
          "type": "{ id: string; title: string; }[]",
          "default": "[]"
        }
      ],
      "properties": [
        {
          "name": "itemsLabel",
          "attribute": "items-label",
          "description": "Label for items section",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "globalSearchLabel",
          "attribute": "global-search-label",
          "description": "Global search label",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "globalSearchPlaceholder",
          "attribute": "global-search-placeholder",
          "description": "Global search placeholder",
          "type": "string",
          "default": "\"Search\""
        },
        {
          "name": "searchResultsTitle",
          "attribute": "search-results-title",
          "description": "No results title",
          "type": "string",
          "default": "\"Search results\""
        },
        {
          "name": "itemCount",
          "attribute": "item-count",
          "description": "Item count for display",
          "type": "number",
          "default": "0"
        },
        {
          "name": "path",
          "attribute": "path",
          "description": "Navigation path for breadcrumbs",
          "type": "{ id: string; title: string; }[]",
          "default": "[]"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "events": [
        {
          "name": "c4p-add-select-body-search",
          "description": "Fired when search term changes"
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "The main content area containing c4p-add-select-content"
        },
        {
          "name": "header",
          "description": "Custom header content"
        }
      ]
    },
    {
      "name": "c4p-add-select-content",
      "path": "./src/components/add-select/add-select-content.ts",
      "description": "Add Select Content component - contains the list of selectable items",
      "properties": [
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "events": [
        {
          "name": "c4p-add-select-row-navigate"
        },
        {
          "name": "c4p-add-select-row-select"
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "Contains c4p-add-select-row components"
        }
      ]
    },
    {
      "name": "c4p-add-select-row",
      "path": "./src/components/add-select/add-select-row.ts",
      "description": "Add Select Row component - represents a single selectable row",
      "attributes": [
        {
          "name": "item-id",
          "description": "Unique identifier for the item",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "title",
          "description": "Item title",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "subtitle",
          "description": "Item subtitle",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "value",
          "description": "Item value",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "selected",
          "description": "Whether the item is selected",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "disabled",
          "description": "Whether the item is disabled",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "has-children",
          "description": "Whether the item has children (for navigation)",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "parent-id",
          "description": "Parent ID for hierarchical navigation",
          "type": "string",
          "default": "\"\""
        }
      ],
      "properties": [
        {
          "name": "itemId",
          "attribute": "item-id",
          "description": "Unique identifier for the item",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "title",
          "attribute": "title",
          "description": "Item title",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "subtitle",
          "attribute": "subtitle",
          "description": "Item subtitle",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "value",
          "attribute": "value",
          "description": "Item value",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "selected",
          "attribute": "selected",
          "description": "Whether the item is selected",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Whether the item is disabled",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "hasChildren",
          "attribute": "has-children",
          "description": "Whether the item has children (for navigation)",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "parentId",
          "attribute": "parent-id",
          "description": "Parent ID for hierarchical navigation",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "events": [
        {
          "name": "c4p-add-select-row-select",
          "description": "Fired when row is selected/deselected"
        },
        {
          "name": "c4p-add-select-row-navigate",
          "description": "Fired when navigating to children"
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "Custom content to render after the title/subtitle section. Useful for adding badges, tags, or other metadata to the row."
        },
        {
          "name": "icon",
          "description": "Optional icon slot"
        },
        {
          "name": "meta",
          "description": "Optional metadata slot"
        }
      ]
    },
    {
      "name": "c4p-add-select",
      "path": "./src/components/add-select/add-select.ts",
      "description": "Add Select wrapper component - provides context for child components",
      "attributes": [
        {
          "name": "multi",
          "description": "Whether this is a multi-select (checkboxes) or single-select (radio buttons)",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "multi",
          "attribute": "multi",
          "description": "Whether this is a multi-select (checkboxes) or single-select (radio buttons)",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "The main content area containing c4p-add-select-body"
        }
      ]
    },
    {
      "name": "c4p-big-number-skeleton",
      "path": "./src/components/big-number/big-number-skeleton.ts",
      "attributes": [
        {
          "name": "size",
          "type": "\"lg\" | \"xl\" | \"default\" | undefined",
          "default": "\"default\""
        }
      ],
      "properties": [
        {
          "name": "size",
          "attribute": "size",
          "type": "\"lg\" | \"xl\" | \"default\" | undefined",
          "default": "\"default\""
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ]
    },
    {
      "name": "c4p-big-number",
      "path": "./src/components/big-number/big-number.ts",
      "attributes": [
        {
          "name": "fraction-digits",
          "type": "number",
          "default": "1"
        },
        {
          "name": "label",
          "type": "string | undefined"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "locale",
          "type": "string",
          "default": "\"en-US\""
        },
        {
          "name": "percentage",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "size",
          "type": "\"lg\" | \"xl\" | \"default\"",
          "default": "\"default\""
        },
        {
          "name": "total",
          "type": "number | undefined"
        },
        {
          "name": "trending",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "truncate",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "value",
          "type": "number | undefined"
        }
      ],
      "properties": [
        {
          "name": "fractionDigits",
          "attribute": "fraction-digits",
          "type": "number",
          "default": "1"
        },
        {
          "name": "label",
          "attribute": "label",
          "type": "string | undefined"
        },
        {
          "name": "loading",
          "attribute": "loading",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "locale",
          "attribute": "locale",
          "type": "string",
          "default": "\"en-US\""
        },
        {
          "name": "percentage",
          "attribute": "percentage",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "size",
          "attribute": "size",
          "type": "\"lg\" | \"xl\" | \"default\"",
          "default": "\"default\""
        },
        {
          "name": "total",
          "attribute": "total",
          "type": "number | undefined"
        },
        {
          "name": "trending",
          "attribute": "trending",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "truncate",
          "attribute": "truncate",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "value",
          "attribute": "value",
          "type": "number | undefined"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "slots": [
        {
          "name": "label",
          "description": "Header area that displays the label above the value. This slot can be customized to include an info icon and a tooltip for additional context."
        },
        {
          "name": "trending-icon",
          "description": "Displays an icon indicating trend direction. Can be customized to show a downward arrow when the trend is not upward."
        },
        {
          "name": "icon-button",
          "description": "Displays an icon button next to `value`."
        }
      ]
    },
    {
      "name": "c4p-checklist-chart",
      "path": "./src/components/checklist/checklist-chart.ts",
      "attributes": [
        {
          "name": "value",
          "description": "A number between 0 and 1 which indicates the progress of checklist",
          "type": "number",
          "default": "0"
        }
      ],
      "properties": [
        {
          "name": "styles",
          "default": "\"styles\""
        },
        {
          "name": "value",
          "attribute": "value",
          "description": "A number between 0 and 1 which indicates the progress of checklist",
          "type": "number",
          "default": "0"
        }
      ]
    },
    {
      "name": "c4p-checklist-group",
      "path": "./src/components/checklist/checklist-group.ts",
      "description": "Sections in c4p-checklist",
      "attributes": [
        {
          "name": "title",
          "description": "Title text of the c4p-checklist-group"
        }
      ],
      "properties": [
        {
          "name": "title",
          "attribute": "title",
          "description": "Title text of the c4p-checklist-group"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "Contains one or more `c4p-checklist-item` components"
        }
      ]
    },
    {
      "name": "c4p-checklist-icon",
      "path": "./src/components/checklist/checklist-icon.ts",
      "attributes": [
        {
          "name": "kind",
          "description": "The icon to be displayed.\nValues can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'",
          "type": "Kinds",
          "default": "\"unchecked\""
        }
      ],
      "properties": [
        {
          "name": "kind",
          "attribute": "kind",
          "description": "The icon to be displayed.\nValues can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'",
          "type": "Kinds",
          "default": "\"unchecked\""
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ]
    },
    {
      "name": "c4p-checklist-item",
      "path": "./src/components/checklist/checklist-item.ts",
      "description": "item in c4p-checklist-group",
      "attributes": [
        {
          "name": "label",
          "description": "label of the c4p-checklist-item"
        },
        {
          "name": "status",
          "description": "status of the c4p-checklist-item\nValues can be 'not started', 'in progress', 'completed', 'error', 'disabled'"
        },
        {
          "name": "clickable",
          "description": "When true, makes the checklist item label clickable",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "label of the c4p-checklist-item"
        },
        {
          "name": "status",
          "attribute": "status",
          "description": "status of the c4p-checklist-item\nValues can be 'not started', 'in progress', 'completed', 'error', 'disabled'"
        },
        {
          "name": "clickable",
          "attribute": "clickable",
          "description": "When true, makes the checklist item label clickable",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "events": [
        {
          "name": "c4p-checklist-item-clicked",
          "description": "The custom event which is fired when a user clicks on checklist item with clickable attribute."
        }
      ],
      "slots": [
        {
          "name": "icon",
          "description": "checklist item icon, usually a status indicator icon"
        },
        {
          "name": "content",
          "description": "checklist item title/description"
        }
      ]
    },
    {
      "name": "c4p-checklist",
      "path": "./src/components/checklist/checklist.ts",
      "attributes": [
        {
          "name": "open",
          "description": "Specifies whether the component is opened or closed.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "title",
          "description": "The title of the component."
        },
        {
          "name": "chart-label",
          "description": "The label for progress indicator chart"
        },
        {
          "name": "chart-value",
          "description": "A number between 0 and 1 which indicates the progress of checklist"
        },
        {
          "name": "disable-toggle",
          "description": "Whether or not to show the open/close toggle.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "toggle-label",
          "description": "The label for the toggle's tooltip."
        },
        {
          "name": "toggle-label-align",
          "description": "The alignment of the toggle's tooltip."
        },
        {
          "name": "toggle-aria-label",
          "description": "Aria-label for the Checklist's toggle component."
        },
        {
          "name": "view-all-label",
          "description": "If defined, will show and enable the \"View all (#)\" button in the checklist footer."
        }
      ],
      "properties": [
        {
          "name": "open",
          "attribute": "open",
          "description": "Specifies whether the component is opened or closed.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "title",
          "attribute": "title",
          "description": "The title of the component."
        },
        {
          "name": "chartLabel",
          "attribute": "chart-label",
          "description": "The label for progress indicator chart"
        },
        {
          "name": "chartValue",
          "attribute": "chart-value",
          "description": "A number between 0 and 1 which indicates the progress of checklist"
        },
        {
          "name": "disableToggle",
          "attribute": "disable-toggle",
          "description": "Whether or not to show the open/close toggle.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "toggleLabel",
          "attribute": "toggle-label",
          "description": "The label for the toggle's tooltip."
        },
        {
          "name": "toggleLabelAlign",
          "attribute": "toggle-label-align",
          "description": "The alignment of the toggle's tooltip."
        },
        {
          "name": "toggleAriaLabel",
          "attribute": "toggle-aria-label",
          "description": "Aria-label for the Checklist's toggle component."
        },
        {
          "name": "viewAllLabel",
          "attribute": "view-all-label",
          "description": "If defined, will show and enable the \"View all (#)\" button in the checklist footer."
        },
        {
          "name": "styles",
          "default": "\"styles\""
        }
      ],
      "events": [
        {
          "name": "c4p-checklist-view-all",
          "description": "The custom event which is fired when a user clicks on View All button in checklist footer."
        },
        {
          "name": "c4p-checklist-toggle",
          "description": "The custom event which is fired when user clicks on toggle button in checklist header."
        }
      ],
      "slots": [
        {
          "name": "checklist-header",
          "description": "Header area which includes the title and the progress indicator."
        },
        {
          "name": "default",
          "description": "Contains one or more `c4p-checklist-group` components to organize tasks into logical groups."
        },
        {
          "name": "checklist-footer",
          "description": "Optional footer area for actions like buttons, links, or additional notes."
        }
      ]
    },
    {
      "name": "c4p-coachmark-beacon",
      "path": "./src/components/coachmark/coachmark-beacon/coachmark-beacon.ts",
      "description": "CoachmarkBeacon.",
      "attributes": [
        {
          "name": "kind",
          "description": "What style of beacon.\nBEACON_KIND is an enum from the Coachmark and can be used for this value.",
          "type": "BEACON_KIND | undefined",
          "default": "\"default\""
        },
        {
          "name": "label",
          "description": "The aria label.",
          "type": "string",
          "default": "\"Show information\""
        },
        {
          "name": "id",
          "description": "id for the coachmark beacon",
          "type": "string",
          "default": "\"crypto.randomUUID()\""
        },
        {
          "name": "expanded",
          "description": "specify aria-expanded of beacon",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "kind",
          "attribute": "kind",
          "description": "What style of beacon.\nBEACON_KIND is an enum from the Coachmark and can be used for this value.",
          "type": "BEACON_KIND | undefined",
          "default": "\"default\""
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "The aria label.",
          "type": "string",
          "default": "\"Show information\""
        },
        {
          "name": "id",
          "attribute": "id",
          "description": "id for the coachmark beacon",
          "type": "string",
          "default": "\"crypto.randomUUID()\""
        },
        {
          "name": "expanded",
          "attribute": "expanded",
          "description": "specify aria-expanded of beacon",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "shadowRootOptions",
          "type": "{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; registry?: CustomElementRegistry | undefined; }",
          "default": "{\"delegatesFocus\":true}"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        },
        {
          "name": "size",
          "type": "number"
        }
      ],
      "events": [
        {
          "name": "c4p-coachmark-beacon-clicked",
          "description": "Custom event fired when beacon is clicked"
        }
      ]
    },
    {
      "name": "c4p-coachmark-body",
      "path": "./src/components/coachmark/coachmark-body.ts",
      "description": "coachmark-body for content body",
      "properties": [
        {
          "name": "enabledWarnings",
          "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",
          "type": "WarningKind[] | undefined"
        },
        {
          "name": "enableWarning",
          "description": "Enable the given warning category for this class.\n\nThis method only exists in development builds, so it should be accessed\nwith a guard like:\n\n```ts\n// Enable for all ReactiveElement subclasses\nReactiveElement.enableWarning?.('migration');\n\n// Enable for only MyElement and subclasses\nMyElement.enableWarning?.('migration');\n```",
          "type": "((warningKind: WarningKind) => void) | undefined"
        },
        {
          "name": "disableWarning",
          "description": "Disable the given warning category for this class.\n\nThis method only exists in development builds, so it should be accessed\nwith a guard like:\n\n```ts\n// Disable for all ReactiveElement subclasses\nReactiveElement.disableWarning?.('migration');\n\n// Disable for only MyElement and subclasses\nMyElement.disableWarning?.('migration');\n```",
          "type": "((warningKind: WarningKind) => void) | undefined"
        },
        {
          "name": "elementProperties",
          "description": "Memoized list of all element properties, including any superclass\nproperties. Created lazily on user subclasses when finalizing the class.",
          "type": "PropertyDeclarationMap"
        },
        {
          "name": "properties",
          "description": "User-supplied object that maps property names to `PropertyDeclaration`\nobjects containing options for configuring reactive properties. When\na reactive property is set the element will update and render.\n\nBy default properties are public fields, and as such, they should be\nconsidered as primarily settable by element users, either via attribute or\nthe property itself.\n\nGenerally, properties that are changed by the element should be private or\nprotected fields and should use the `state: true` option. Properties\nmarked as `state` do not reflect from the corresponding attribute\n\nHowever, sometimes element code does need to set a public property. This\nshould typically only be done in response to user interaction, and an event\nshould be fired informing the user; for example, a checkbox sets its\n`checked` property when clicked and fires a `changed` event. Mutating\npublic properties should typically not be done for non-primitive (object or\narray) properties. In other cases when an element needs to manage state, a\nprivate property set with the `state: true` option should be used. When\nneeded, state properties can be initialized via public properties to\nfacilitate complex interactions.",
          "type": "PropertyDeclarations"
        },
        {
          "name": "elementStyles",
          "description": "Memoized list of all element styles.\nCreated lazily on user subclasses when finalizing the class.",
          "type": "CSSResultOrNative[]"
        },
        {
          "name": "styles",
          "description": "[object Object],[object Object],[object Object]",
          "default": "\"styles\""
        },
        {
          "name": "shadowRootOptions",
          "description": "Options used when calling `attachShadow`. Set this property to customize\nthe options for the shadowRoot; for example, to create a closed\nshadowRoot: `{mode: 'closed'}`.\n\nNote, these options are used in `createRenderRoot`. If this method\nis customized, options should be respected if possible.",
          "type": "ShadowRootInit"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | DocumentFragment"
        },
        {
          "name": "isUpdatePending",
          "description": "True if there is a pending update as a result of calling `requestUpdate()`.\nShould only be read.",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "description": "Is set to `true` after the first update. The element code cannot assume\nthat `renderRoot` exists before the element `hasUpdated`.",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        },
        {
          "name": "size",
          "type": "number"
        }
      ]
    },
    {
      "name": "c4p-coachmark-header",
      "path": "./src/components/coachmark/coachmark-header.ts",
      "description": "coachmark-header for content header section",
      "attributes": [
        {
          "name": "closeIconDescription",
          "description": "Tooltip text and aria label for the Close button icon.",
          "type": "string | undefined",
          "default": "\"\""
        },
        {
          "name": "dragIconDescription",
          "description": "Tooltip text and aria label for the Drag button icon.",
          "type": "string | undefined",
          "default": "\"\""
        }
      ],
      "properties": [
        {
          "name": "closeIconDescription",
          "attribute": "closeIconDescription",
          "description": "Tooltip text and aria label for the Close button icon.",
          "type": "string | undefined",
          "default": "\"\""
        },
        {
          "name": "dragIconDescription",
          "attribute": "dragIconDescription",
          "description": "Tooltip text and aria label for the Drag button icon.",
          "type": "string | undefined",
          "default": "\"\""
        },
        {
          "name": "enabledWarnings",
          "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",
          "type": "WarningKind[] | undefined"
        },
        {
          "name": "enableWarning",
          "description": "Enable the given warning category for this class.\n\nThis method only exists in development builds, so it should be accessed\nwith a guard like:\n\n```ts\n// Enable for all ReactiveElement subclasses\nReactiveElement.enableWarning?.('migration');\n\n// Enable for only MyElement and subclasses\nMyElement.enableWarning?.('migration');\n```",
          "type": "((warningKind: WarningKind) => void) | undefined"
        },
        {
          "name": "disableWarning",
          "description": "Disable the given warning category for this class.\n\nThis method only exists in development builds, so it should be accessed\nwith a guard like:\n\n```ts\n// Disable for all ReactiveElement subclasses\nReactiveElement.disableWarning?.('migration');\n\n// Disable for only MyElement and subclasses\nMyElement.disableWarning?.('migration');\n```",
          "type": "((warningKind: WarningKind) => void) | undefined"
        },
        {
          "name": "elementProperties",
          "description": "Memoized list of all element properties, including any superclass\nproperties. Created lazily on user subclasses when finalizing the class.",
          "type": "PropertyDeclarationMap"
        },
        {
          "name": "properties",
          "description": "User-supplied object that maps property names to `PropertyDeclaration`\nobjects containing options for configuring reactive properties. When\na reactive property is set the element will update and render.\n\nBy default properties are public fields, and as such, they should be\nconsidered as primarily settable by element users, either via attribute or\nthe property itself.\n\nGenerally, properties that are changed by the element should be private or\nprotected fields and should use the `state: true` option. Properties\nmarked as `state` do not reflect from the corresponding attribute\n\nHowever, sometimes element code does need to set a public property. This\nshould typically only be done in response to user interaction, and an event\nshould be fired informing the user; for example, a checkbox sets its\n`checked` property when clicked and fires a `changed` event. Mutating\npublic properties should typically not be done for non-primitive (object or\narray) properties. In other cases when an element needs to manage state, a\nprivate property set with the `state: true` option should be used. When\nneeded, state properties can be initialized via public properties to\nfacilitate complex interactions.",
          "type": "PropertyDeclarations"
        },
        {
          "name": "elementStyles",
          "description": "Memoized list of all element styles.\nCreated lazily on user subclasses when finalizing the class.",
          "type": "CSSResultOrNative[]"
        },
        {
          "name": "styles",
          "description": "[object Object],[object Object],[object Object]",
          "default": "\"styles\""
        },
        {
          "name": "shadowRootOptions",
          "description": "Options used when calling `attachShadow`. Set this property to customize\nthe options for the shadowRoot; for example, to create a closed\nshadowRoot: `{mode: 'closed'}`.\n\nNote, these options are used in `createRenderRoot`. If this method\nis customized, options should be respected if possible.",
          "type": "ShadowRootInit"
        },
        {
          "name": "renderRoot",
          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
          "type": "HTMLElement | DocumentFragment"
        },
        {
          "name": "isUpdatePending",
          "description": "True if there is a pending update as a result of calling `requestUpdate()`.\nShould only be read.",
          "type": "boolean"
        },
        {
          "name": "hasUpdated",
          "description": "Is set to `true` after the first update. The element code cannot assume\nthat `renderRoot` exists before the element `hasUpdated`.",
          "type": "boolean"
        },
        {
          "name": "updateComplete",
          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
          "type": "Promise<boolean>"
        },
        {
          "name": "size",
          "type": "number"
        }
      ]
    },
    {
      "name": "c4p-coachmark-tagline",
      "path": "./src/components/coachmark/coachmark-tagline/coachmark-tagline.ts",
      "description": "DO NOT USE. This component is for the exclusive use\nof other Onboarding components.\n\nCoachmark tagline component.",
      "attributes": [
        {
          "name": "close-icon-description",
          "description": "Tooltip text and aria label for the Close button icon.",
          "type": "string",
          "default": "\"Close\""
        },
        {
          "name": "title",
          "description": "The title of the tagline.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "open",
          "description": "Whether the tagline is open.",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "closeIconDescription",
          "attribute": "close-icon-description",
          "description": "Tooltip text and aria label for the Close button icon.",
          "type": "string",
          "default": "\"Close\""
        },
        {
          "name": "title",
          "attribute": "title",
          "description": "The title of the tagline.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "open",
          "attribute": "open",
          "description": "Whether the tagline is open.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "shadowRootOptions",
          "type": "{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; registry?: CustomElementRegistry | undefined; }",
          "default": "{\"delegatesFocus\":true}"
        },
        {
          "name": "styles",
          "default": "\"styles\""
        },
        {
          "name": "size",
          "type": "number"
        }
      ],
      "events": [
        {
          "name": "c4p-coachmark-tagline-close",
          "description": "Custom event fired when close button is clicked"
        },
        {
          "name": "c4p-coachmark-tagline-cta-click",
          "description": "Custom event fired when tagline CTA is clicked"
        }
      ]
    },
    {
      "name": "c4p-coachmark",
      "path": "./src/components/coachmark/coachmark.ts",
      "description": "coachmark main component",
      "attributes": [
        {
          "name": "open",
          "description": "Specifies whether the component is currently open.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "align",
          "description": "Where to render the Coachmark relative to its target.",
          "type": "string | undefined",
          "default": "\"top\""
        },
        {
          "name": "position",
          "description": "Fine tune the position of the target in pixels.",
          "type": "{ x: number; y: number; } | undefined"
        },
        {
          "name": "floating",
          "description": "Specifies whether the component is floating or not.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "highContrast",
          "description": "Specify whether the component should be rendered on high-contrast.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "dropShadow",
          "description": "Specify whether a drop shadow should be rendered on the popover.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "caret",
          "description": "Specify whether a caret should be rendered on the popover. This is intended to use only for coachmark patterns.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "selector-primary-focus",
          "description": "CSS selector for the element that should receive focus when the coachmark opens.\nIf not provided, no automatic focus management will occur.",
          "type": "string | undefined"
        },
        {
          "name": "drag-aria-label",
          "description": "Aria label for when the floating coachmark is picked up for dragging.",
          "type": "string | undefined",
          "default": "\"Picked up the draggable coachmark\""
        }
      ],
      "properties": [
        {
          "name": "open",
          "attribute": "open",
          "description": "Specifies whether the component is currently open.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "align",
          "attribute": "align",
          "description": "Where to render the Coachmark relative to its target.",
          "type": "string | undefined",
          "default": "\"top\""
        },
        {
          "name": "position",
          "attribute": "position",
          "description": "Fine tune the position of the target in pixels.",
          "type": "{ x: number; y: number; } | undefined"
        },
        {
          "name": "floating",
          "attribute": "floating",
          "description": "Specifies whether the component is floating or not.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "highContrast",
          "attribute": "highContrast",
          "description": "Specify whether the component should be rendered on high-contrast.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "dropShadow",
          "attribute": "dropShadow",
          "description": "Specify whether a drop shadow should be rendered on the popover.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "caret",
          "attribute": "caret",
          "description": "Specify whether a caret should be rendered on the popover. This is intended to use only for coachmark patterns.",
          "type": "boolean | undefined",
          "default": "false"
        },
        {
          "name": "selectorPrimaryFocus",
          "attribute": "selector-primary-focus",
          "description": "CSS selector for the element that should receive focus when the coachmark opens.\nIf not provided, no automatic focus management will occur.",
          "type": "string | undefined"
        },
        {
          "name": "dragAriaLabel",
          "attribute": "drag-aria-label",
          "description": "Aria label for when the floating coachmark is picked up for dragging.",
          "type": "string | undefined",
          "default": "\"Picked up the draggable coachmark\""
        },
        {
          "name": "enabledWarnings",
          "description": "Read or set all the enabled warning categories for this class.\n\nThis property is only used in development builds.",
          "type": "WarningKind[] | undefined"
        },
        {
          "name": "enableWarning",
          "description": "Enable the given warning category for this class.\n\nThis method only exists in development builds, so it should be accessed\nwith a guard like:\n\n```ts\n// Enable for all ReactiveElement subclasses\nReactiveElement.enableWarning?.('migra