{
  "version": 1.1,
  "tags": [
    {
      "name": "xpl-accordion",
      "description": {
        "kind": "markdown",
        "value": "Accordions are collapsable containers and allow users to collapse or expand the container. Useful when many items are present in a section and users may benefit from closing content to gain more space or focus on content that is most important to them. \n\nUse the content slot in the opened state to swap in Apollo components or make your own local component with groups of Apollo components or custom content.\n\nNote: Users will often miss any content that is hidden behind an interaction. If it is important that users see the content, use an accordion's open state on load `initialExpanded`, or use another pattern."
      },
      "attributes": [
        {
          "name": "border-type",
          "description": "set the border of the accordion\n none: there’s no border wrapping the header\n bottom:there’s a border below the header\n bordered: the header is wrapped by a white panel with a rounded border around it on every side",
          "values": [
            {
              "name": "bordered"
            },
            {
              "name": "bottom"
            },
            {
              "name": "none"
            }
          ]
        },
        {
          "name": "content-id",
          "description": "An optional id of the content slot"
        },
        {
          "name": "description",
          "description": "if defined, a text field that displays under the header"
        },
        {
          "name": "header",
          "description": "Sets the text for the header of the accordion"
        },
        {
          "name": "initial-expanded",
          "description": "Set if the content is shown\n false: the accordion is collapsed (default)\n true: the accordion is expanded"
        },
        {
          "name": "size",
          "description": "Set the size of the header and icon size can be 1(default),2,3",
          "values": [
            {
              "name": "1"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-application-shell",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "is-nav-open-at-startup",
          "description": ""
        },
        {
          "name": "nav-width",
          "description": ""
        },
        {
          "name": "with-subnav",
          "description": ""
        },
        {
          "name": "with-utility",
          "description": ""
        }
      ]
    },
    {
      "name": "xpl-avatar",
      "description": {
        "kind": "markdown",
        "value": "The **Avatar** component shows a person or entity: a photo, initials on a colored surface, or custom slot content. It aligns with Apollo’s Figma patterns for default avatars, profile layouts, stacked groups, and rows with supporting text."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Background color when there is no image src",
          "values": [
            {
              "name": "green"
            },
            {
              "name": "pink"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "yellow"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Sets a disabled state on the avatar when set to true"
        },
        {
          "name": "group-data",
          "description": "When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }."
        },
        {
          "name": "href",
          "description": "The URL if the avatar should be hyperlinked"
        },
        {
          "name": "name",
          "description": "Alt text for the image; also used for initials when no image and no slot."
        },
        {
          "name": "size",
          "description": "Size of the avatar (and of each avatar in a group).",
          "values": [
            {
              "name": "md"
            },
            {
              "name": "sm"
            }
          ]
        },
        {
          "name": "src",
          "description": "The image URL"
        },
        {
          "name": "status",
          "description": "Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`.\n**Legacy",
          "values": [
            {
              "name": "active"
            },
            {
              "name": "blue"
            },
            {
              "name": "gray"
            },
            {
              "name": "green"
            },
            {
              "name": "inactive"
            },
            {
              "name": "orange"
            },
            {
              "name": "purple"
            },
            {
              "name": "red"
            },
            {
              "name": "warning"
            },
            {
              "name": "yellow"
            }
          ]
        },
        {
          "name": "sub-text",
          "description": "Secondary text shown when `variant` is `with-text` (e.g. email)."
        },
        {
          "name": "target",
          "description": "Where to open the URL chosen for the `href` prop:\n`_self` (default), `_blank`, `_parent`, or `_top`"
        },
        {
          "name": "variant",
          "description": "Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown),\n`with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar.",
          "values": [
            {
              "name": "group"
            },
            {
              "name": "profile"
            },
            {
              "name": "with-text"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-backdrop",
      "description": {
        "kind": "markdown",
        "value": "This backdrop is used to add a transparent darker layer on top of the content area to focus the user’s attention. Typically used when a dialog such as a modal or slide out panel is active."
      },
      "attributes": [
        {
          "name": "relative",
          "description": ""
        }
      ]
    },
    {
      "name": "xpl-badge",
      "description": {
        "kind": "markdown",
        "value": "`xpl-badge` is a small, non-interactive status indicator used to communicate counts, states, or supplementary information next to another element. Badges are **never clickable** – use a button or link if you need interaction.\n\nBadges support multiple **variants** (colors), **sizes**, **shapes**, and **dot styles**, so they can be used both as pill labels and as compact status / notification indicators."
      },
      "attributes": [
        {
          "name": "bordered",
          "description": "Whether badge shows a bordered ring"
        },
        {
          "name": "dot",
          "description": "Whether badge shows a dot icon before the text (inside the pill)"
        },
        {
          "name": "dot-only",
          "description": "When true, render a compact badge built around the dot.\n- With no children: just a dot (status/dot badge)\n- With children: a small dot badge with the text/number inside"
        },
        {
          "name": "shape",
          "description": "Badge shape\nrounded (pill) boxy (rounded corners)",
          "values": [
            {
              "name": "boxy"
            },
            {
              "name": "rounded"
            }
          ]
        },
        {
          "name": "size",
          "description": "Badge size\ndefault | small",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Badge variant (color).\n\nPreferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.\n\nThe legacy semantic names `success`, `warning`, `inactive`, and `error` are still\naccepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the\ncolor names for new code.",
          "values": [
            {
              "name": "blue"
            },
            {
              "name": "error"
            },
            {
              "name": "gray"
            },
            {
              "name": "green"
            },
            {
              "name": "inactive"
            },
            {
              "name": "orange"
            },
            {
              "name": "purple"
            },
            {
              "name": "red"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "yellow"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-banner",
      "description": {
        "kind": "markdown",
        "value": "Banners display a system level or page level message at the top of the screen. The section-banner variant displays important messages inline within a section."
      },
      "attributes": [
        {
          "name": "action-text",
          "description": "Primary action label. When provided, an action button is rendered."
        },
        {
          "name": "appearance",
          "description": "Controls the visual appearance and semantic meaning of the banner.\nThese values map to messaging background/border token sets in `banner.css`.\nBanner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text\ntokens for contrast on dark backgrounds.",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "information"
            },
            {
              "name": "positive"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "description",
          "description": "Optional supporting message shown after the heading.\nDescription text uses `--xpl-text-default`."
        },
        {
          "name": "has-icon",
          "description": "Whether to render the leading icon in section layout.\nIgnored in bar layout — bar banners always show the icon."
        },
        {
          "name": "heading",
          "description": "Primary banner message shown with stronger title typography."
        },
        {
          "name": "is-dismissible",
          "description": "Whether to show the trailing dismiss control."
        },
        {
          "name": "is-section",
          "description": "Renders the section-style banner layout when true."
        },
        {
          "name": "secondary-action-text",
          "description": "Secondary action label. When provided, a second action button is rendered."
        },
        {
          "name": "truncate-desc",
          "description": "When true, `description` is constrained to one line with ellipsis so banner height stays stable."
        }
      ]
    },
    {
      "name": "xpl-breadcrumb-item",
      "description": {
        "kind": "markdown",
        "value": "The `<xpl-breadcrumb-item>` component has a role of `listitem`. This component should only be used in combination with `<xpl-breadcrumbs>`.\nThis component yields an unnamed slot. Only links and buttons (styled as links) should be used within this component."
      },
      "attributes": []
    },
    {
      "name": "xpl-breadcrumbs",
      "description": {
        "kind": "markdown",
        "value": "The `xpl-breadcrumbs` component is a navigation group. It yields an unnamed slot that is rendered inside a `<ol></ol>` element.\n\nThis component can be used as a wrapper to `<xpl-breadcrumb-item>` components.\n\nThe number of items is not restricted, although per Apollo's design guidelines, a maximum of three items should be used.\nIn small screens (xs), only the 2 deepest items will be visible, even if 3 items are provided."
      },
      "attributes": []
    },
    {
      "name": "xpl-button",
      "description": {
        "kind": "markdown",
        "value": "Buttons allow users to take an action with clear visual hierarchy (variant), semantic meaning (sentiment), and size."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether button should be disabled"
        },
        {
          "name": "form",
          "description": "An optional form attribute for the button if type is submit"
        },
        {
          "name": "full-width",
          "description": "Whether the button should be of full width as per parent container."
        },
        {
          "name": "icon",
          "description": "Icon to render - icon name as string (from xpl-icon library)."
        },
        {
          "name": "icon-only",
          "description": "When true, the button renders in icon-only circular style. Use for icon-only buttons."
        },
        {
          "name": "icon-position",
          "description": "Icon position relative to slot content. Ignored if no icon is provided.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "is-loading",
          "description": "When true, shows a loading overlay with spinner over the button. Button is non-interactive."
        },
        {
          "name": "link",
          "description": "whether button should yield a slot for a link tag"
        },
        {
          "name": "name",
          "description": "Name of the button, submitted with form data. Passed through to the native button element."
        },
        {
          "name": "sentiment",
          "description": "Sentiment of the button, which applies different color schemes to indicate purpose/intent.",
          "values": [
            {
              "name": "negative"
            },
            {
              "name": "neutral"
            },
            {
              "name": "positive"
            }
          ]
        },
        {
          "name": "size",
          "description": "Button size. Use 'default', 'xs' (extra small), or 'sm' (small).",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "sm"
            },
            {
              "name": "xs"
            }
          ]
        },
        {
          "name": "state",
          "description": "",
          "values": [
            {
              "name": "neutral"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "type",
          "description": "HTML button type attribute.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "value",
          "description": "Value of the button, submitted with form data. Passed through to the native button element."
        },
        {
          "name": "variant",
          "description": "Button variant/style. Use \"primary\", \"secondary\", \"tertiary\" for new usage. \"subtle\" is deprecated but still supported for backward compatibility.",
          "values": [
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "subtle"
            },
            {
              "name": "tertiary"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-button-row",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "primary",
          "description": "The text for the primary button.",
          "values": [
            {
              "name": "string"
            }
          ]
        },
        {
          "name": "secondary",
          "description": "The text for the secondary button. If left\nempty, will not render a secondary button.",
          "values": [
            {
              "name": "string"
            }
          ]
        },
        {
          "name": "tertiary",
          "description": "The text for the tertiary button. If left\nempty, will not render a secondary button.",
          "values": [
            {
              "name": "string"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-calendar",
      "description": {
        "kind": "markdown",
        "value": "Calendars allow users to view and select dates.  Use XPL-Calendar when date picking is needed on a page or in a in a container.\nIf a calendar is needed within a form, use [XPL-Datepicker](https://apollo.xplordocs.com/?path=/story/components-input--datepicker)."
      },
      "attributes": [
        {
          "name": "date-format",
          "description": "Format of the date displayed in the calendar. Default is 'Y-m-d'."
        },
        {
          "name": "default-date",
          "description": "Default date to be displayed when the calendar is first loaded."
        },
        {
          "name": "input-id",
          "description": "Unique identifier for the calendar element."
        },
        {
          "name": "max",
          "description": "Maximum selectable date in the calendar."
        },
        {
          "name": "min",
          "description": "Minimum selectable date in the calendar."
        },
        {
          "name": "mode",
          "description": "Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'.",
          "values": [
            {
              "name": "range"
            },
            {
              "name": "single"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-checkbox",
      "description": {
        "kind": "markdown",
        "value": "Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.\n\nProvide visible label text in the default slot, or set `aria-label` when the checkbox has no adjacent label (for example, icon-only toolbars or table selection cells)."
      },
      "attributes": [
        {
          "name": "aria-label",
          "description": "Accessible name for the native checkbox input (sets `aria-label` on the `input`).\nUse when there is no visible label text in the default slot.\nDefaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source."
        },
        {
          "name": "checked",
          "description": "Whether the input is checked"
        },
        {
          "name": "data-id",
          "description": "A custom data attribute for the checkbox"
        },
        {
          "name": "description",
          "description": "Description text for the field"
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled"
        },
        {
          "name": "indeterminate",
          "description": "A visual state for when the input has not been interacted with"
        },
        {
          "name": "name",
          "description": "The name attribute for the html input.\n(submitted in form as name/value pair)"
        },
        {
          "name": "required",
          "description": "Whether the input is required"
        },
        {
          "name": "styled",
          "description": "Whether the input is contained in a box with a border and a background"
        },
        {
          "name": "value",
          "description": "The value attribute for the checkbox input.\n(submitted in form as name/value pair)"
        }
      ]
    },
    {
      "name": "xpl-choicelist",
      "description": {
        "kind": "markdown",
        "value": "A Choice List allows users to make single or multiple selections from a list of choices.  This component is meant to consume the radio and checkbox components, either styled or unstyled, then allow for customizing an option list very quickly."
      },
      "attributes": [
        {
          "name": "description",
          "description": "Descriptive text to be displayed above the choice-list."
        },
        {
          "name": "heading",
          "description": "The title text to be displayed above the choice-list."
        },
        {
          "name": "multi",
          "description": "Whether the user can select more than one choice (true) or only a single choice (false). Corresponds to checkboxes vs. radio buttons."
        },
        {
          "name": "name",
          "description": "The `name` to be associated with form data."
        },
        {
          "name": "styled",
          "description": "If `true`, will include borders around the list and between individual choices."
        }
      ]
    },
    {
      "name": "xpl-content-area",
      "description": {
        "kind": "markdown",
        "value": "The `<xpl-content-area>` sets up the area for the main content of the page. This component renders a `<main>` element with an unnamed `<slot>`, and should not be combined with another `<main>` in the same page."
      },
      "attributes": [
        {
          "name": "size",
          "description": "",
          "values": [
            {
              "name": "full"
            },
            {
              "name": "narrow"
            },
            {
              "name": "wide"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-dashboard",
      "description": {
        "kind": "markdown",
        "value": "The XPL-Dashboard component is a code-only utility component for responsive layouts using the XPL-Data Card component."
      },
      "attributes": []
    },
    {
      "name": "xpl-data-card",
      "description": {
        "kind": "markdown",
        "value": "Data Cards display snippets of information and can be linked to larger data sets. Data Cards give users \"at a glance\" information about their data.\n\nThe `icon` and `smallStatIcon` properties accept icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list."
      },
      "attributes": [
        {
          "name": "detail",
          "description": "An optional field that typically describes or modifies the small stat"
        },
        {
          "name": "icon",
          "description": "An optional icon leading the header.\nUses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
        },
        {
          "name": "leading-icon",
          "description": "Whether to display the icon or not."
        },
        {
          "name": "link",
          "description": "Whether the card is a link"
        },
        {
          "name": "name",
          "description": "Name Term"
        },
        {
          "name": "short-stat",
          "description": "Detail, stat, or value to be displayed\nin short format. Will be rendered when card is\nsmaller than 441px."
        },
        {
          "name": "small-stat",
          "description": "An Optional stat further enhancing the main metric of the card."
        },
        {
          "name": "small-stat-icon",
          "description": "An optional icon leading the small stat.\nUses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
        },
        {
          "name": "small-stat-variant",
          "description": "set a variant that changes the color of the small stat based on the following rules:\n\n If trend is positive and greater than 0.5% color is green and up-right arrow is used\n\n If the trend is between -0.5% and 0.5% then its neutral the color is gray\n\n If the trend is negative less than -0.5% the color is red and down right arrow is used",
          "values": [
            {
              "name": "negative"
            },
            {
              "name": "neutral"
            },
            {
              "name": "positive"
            }
          ]
        },
        {
          "name": "stat",
          "description": "Detail, stat, or value to be displayed.\nWill be rendered when card is larger than 441px.\nWill also appear in the tooltip when shortStat\nis shown."
        },
        {
          "name": "tooltip-text-small-stat",
          "description": "An optional field for tooltip text of small stat"
        },
        {
          "name": "tooltip-text-stat",
          "description": "An optional field for tooltip text of stat"
        },
        {
          "name": "variant",
          "description": "Color variant. Used to set the icon\ncolor and background.",
          "values": [
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-divider",
      "description": {
        "kind": "markdown",
        "value": "Allows for easy separation and titling of sections within forms or other content."
      },
      "attributes": [
        {
          "name": "tier",
          "description": "The tier should be an integer between 0 and 3.\nTier 0 dividers do not display text, and 1-3 increase\nin size with each increasing tier."
        }
      ]
    },
    {
      "name": "xpl-dropdown",
      "description": {
        "kind": "markdown",
        "value": "A Dropdown is a menu with a list of actions a user can take. Use a dropdown when you want to present a list of actions in a limited space. Dropdowns are single-select ***actions***, can be presented in groups, and can be triggered by other elements such as a button, icon, text etc. \nA selection within a dropdown does not change the parent trigger.\n\n***If you want to present a list of **options** a user can select, or multi-select options, please use [XPL-Select](https://apollo.xplordocs.com/?path=/story/components-select--select).***"
      },
      "attributes": [
        {
          "name": "anchor-to-trigger",
          "description": "whether to anchor the dropdown to the trigger element, requires triggerId to be set"
        },
        {
          "name": "close-on-select",
          "description": "options that are listed"
        },
        {
          "name": "open",
          "description": "text to display as heading"
        },
        {
          "name": "mode",
          "description": "constant representing number of options that can be selected",
          "values": [
            {
              "name": "multi"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "placement",
          "description": "Floating UI placement when `anchorToTrigger` is true (e.g. `bottom-start`, `top-start`).",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "select-on-focus",
          "description": "whether selection should be made when focusing on interactive element"
        },
        {
          "name": "selected-values",
          "description": "The currently selected value(s) in the dropdown."
        },
        {
          "name": "trigger-id",
          "description": "the id for the element that triggers the open state"
        }
      ]
    },
    {
      "name": "xpl-dropdown-group",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "label",
          "description": "text to display as heading"
        }
      ]
    },
    {
      "name": "xpl-dropdown-heading",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "label",
          "description": "text to display as heading"
        }
      ]
    },
    {
      "name": "xpl-dropdown-option",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "icon",
          "description": "optional icon name to display before the label (uses xpl-icon)"
        },
        {
          "name": "disabled",
          "description": "whether option is disabled"
        },
        {
          "name": "selected",
          "description": "whether option is selected"
        },
        {
          "name": "label",
          "description": "text to display for option"
        },
        {
          "name": "subtitle",
          "description": "optional subtitle text to display below label"
        },
        {
          "name": "value",
          "description": "The selected options value to be submitted with the form, should this option be selected."
        }
      ]
    },
    {
      "name": "xpl-dynamic-table",
      "description": {
        "kind": "markdown",
        "value": "> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.\n\nThe Dynamic Table is a rich content table that can accommodate multiple types of data."
      },
      "attributes": []
    },
    {
      "name": "xpl-dynamic-table-cell",
      "description": {
        "kind": "markdown",
        "value": "> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the cell and its contents are disabled."
        }
      ]
    },
    {
      "name": "xpl-dynamic-table-row",
      "description": {
        "kind": "markdown",
        "value": "> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the row and its cells are disabled."
        },
        {
          "name": "selected",
          "description": "Whether the row is selected."
        }
      ]
    },
    {
      "name": "xpl-grid",
      "description": {
        "kind": "markdown",
        "value": "XPL-Grid is a code only utility component to help with responsive layouts."
      },
      "attributes": []
    },
    {
      "name": "xpl-grid-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "lg",
          "description": "The number of columns the element should span  out of a 6 column grid on a\n lg size screen"
        },
        {
          "name": "md",
          "description": "The number of columns the element should span  out of a 6 column grid on a\n md size screen"
        },
        {
          "name": "sm",
          "description": "The number of columns the element should span  out of a 6 column grid on a\n sm size screen"
        },
        {
          "name": "xs",
          "description": "The number of columns the element should span  out of a 6 column grid on a\n xs size screen"
        }
      ]
    },
    {
      "name": "xpl-header-accordion",
      "description": {
        "kind": "markdown",
        "value": "The toolbar component allows users to manipulate selections within the Dynamic Table.  It is only visible when a row or cell is in the selected state and bulk actions can be taken on that row or cell. \n\n> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases."
      },
      "attributes": [
        {
          "name": "content-id",
          "description": "The id of the content region controlled by the accordion."
        },
        {
          "name": "disabled",
          "description": "Whether the accordion is disabled."
        },
        {
          "name": "has-checkbox",
          "description": "Whether to display a parent checkbox in the accordion header."
        },
        {
          "name": "initial-expanded",
          "description": "Whether the accordion is expanded initially."
        },
        {
          "name": "selected-count",
          "description": "The number of selected child items, or -1 to auto-calculate."
        }
      ]
    },
    {
      "name": "xpl-icon",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "background-color",
          "description": "Icon's background color."
        },
        {
          "name": "icon",
          "description": "Name of icon."
        },
        {
          "name": "size",
          "description": "Size of icon"
        }
      ]
    },
    {
      "name": "xpl-input",
      "description": {
        "kind": "markdown",
        "value": "A flexible form input that supports multiple `type` values: `text`, `number`, `password`, `date`, `time`, `file`, `color`, `phone`, and `search`. Each type delegates to a dedicated sub-component (`xpl-input-date`, `xpl-input-time`, `xpl-input-phone`, `xpl-input-search`, etc.) while sharing a common label, description, and error-message wrapper.\n\nFor `type=\"phone\"`, the value is always emitted in **E.164** format (e.g. `+14155551234`). See [`xpl-input-phone`](xpl-input-phone) for full phone-input documentation."
      },
      "attributes": [
        {
          "name": "_id",
          "description": "Because `id` is a reserved HTMLElement attribute,\nwe prefix it with an underscore here so that it\ndoesn't get automatically applied to the outer container.\n\nApplies to all input types."
        },
        {
          "name": "accept",
          "description": "The accepted file types for the file input.\nCorresponds to the `accept` attribute on the input element.\nExample: 'image/*' for all image types, '.pdf' for PDF files, etc.\n\nApplies to file inputs."
        },
        {
          "name": "allow-custom-option",
          "description": "For time inputs, whether to allow custom option in the input even if not available in the dropdown.\nExample: A step of 30 minutes will allow 15:03, 15:37, etc.\n\nApplies to time inputs."
        },
        {
          "name": "aria-label",
          "description": "Accessible name for search inputs when there is no visible `label` (after trim).\nIgnored for naming when a visible label is shown.\nDefaults to `''`; whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed when there is no visible label.\n\nApplies to search inputs (`type=\"search\"`)."
        },
        {
          "name": "autocomplete",
          "description": "Hint for form autofill feature\n\nApplies to text, password, number, and search inputs."
        },
        {
          "name": "date-format",
          "description": "The date format to use for the datepicker input.\nThis is used by flatpickr to format the date.\nDefault is 'Y-m-d' (e.g., 2023-10-01).\n\nSee https://flatpickr.js.org/formatting/ for more details.\n\nApplies to date inputs."
        },
        {
          "name": "default-country",
          "description": "Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. \"US\".\n\nApplies to phone inputs."
        },
        {
          "name": "description",
          "description": "Optional text that appears below the input label.\n\nApplies to all input types."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled\n\nApplies to all input types."
        },
        {
          "name": "error",
          "description": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message.\n\nApplies to all input types."
        },
        {
          "name": "hide-accept-text",
          "description": "Hides the \"Accept\" text that indicates the accepted file types\nThis is useful for cases where you want to hide the \"Accept\" text.\n\nApplies to file inputs."
        },
        {
          "name": "hide-eye-dropper",
          "description": "Hide eye dropper\n\nApplies to color inputs."
        },
        {
          "name": "hide-file-names",
          "description": "Hides the file names in the file upload component\nThis is useful for cases where you want to hide the file names after selection.\n\nApplies to file inputs."
        },
        {
          "name": "hide-trigger-on-select",
          "description": "Hides the trigger element when a file is selected.\nThis is useful for cases where you want to hide the trigger after a file is selected.\n\nApplies to file inputs."
        },
        {
          "name": "is-international",
          "description": "Enables international mode with country selector for phone inputs.\nWhen false, the phone input is locked to defaultCountry with no country picker."
        },
        {
          "name": "label",
          "description": "Label text for the field\n\nApplies to all input types."
        },
        {
          "name": "max",
          "description": "Maximum value for the input.\n\nApplies to number, time, and date inputs.\n\nIf the input is a time input, the value must be in 24 hour format, ex: 18:25 for 6:25 PM"
        },
        {
          "name": "max-character-count",
          "description": "For multiline inputs, a max. character count will\ndisplay along with the current character count,\nand will automatically render as an error if the\ncharacter count exceeds the max.\n\nThis is only applicable if `multiline` is `true`."
        },
        {
          "name": "min",
          "description": "The minimum value for the input.\n\nApplies to number, time, and date inputs.\n\nIf the input is a time input, the value must be in 24 hour format, ex: 05:25 for 5:25 AM"
        },
        {
          "name": "mode",
          "description": "For datepicker inputs, whether to allow only a single\ndate or a range of dates. (Multiple non-consecutive\ndates planned to be supported in the future.)\n\nApplies to date inputs.",
          "values": [
            {
              "name": "range"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "multiline",
          "description": "Whether to render as a singleline text input or\nas a multiline textarea. (If `true`, `pre` and `post`\nvalues will be ignored, if present.)\n\nApplies to text inputs."
        },
        {
          "name": "multiple",
          "description": "Whether the user can select multiple files at once.\nCorresponds to the `multiple` attribute on the input element.\n\nApplies to file inputs."
        },
        {
          "name": "name",
          "description": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data.\n\nApplies to all input types."
        },
        {
          "name": "placeholder",
          "description": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, date, and search inputs."
        },
        {
          "name": "post",
          "description": "A string (recommended max 3 characters) that gets shown\nvisually to the left of (before) the input.\n\nApplies to text, password, number, and date inputs.\nNote: This will be ignored if `multiline` is `true`."
        },
        {
          "name": "pre",
          "description": "A string (recommended max 8 characters) that gets shown\nvisually to the right of (after) the input.\n\nApplies to text, password, number, and date inputs.\nNote: This will be ignored if `multiline` is `true`."
        },
        {
          "name": "readonly",
          "description": "Whether the input is editable\n\nApplies to text, password, number, date, and search inputs."
        },
        {
          "name": "required",
          "description": "Whether the input is required\n\nApplies to all input types."
        },
        {
          "name": "shape",
          "description": "Shell corner radius for search inputs: `rounded` (pill) or `box` (rounded rectangle).\n\nApplies to search inputs (`type=\"search\"`).",
          "values": [
            {
              "name": "box"
            },
            {
              "name": "rounded"
            }
          ]
        },
        {
          "name": "step",
          "description": "The granularity that the value in a `number` input must adhere to when\nincrementing or decrementing. The default stepping value for number\ninputs is 1\n\nApplies to number and time inputs."
        },
        {
          "name": "time-format",
          "description": "The time format to display for the input.\n\nApplies to time inputs.\n\nIf 12h is selected, the value will be displayed in 12 hour format, ex: 05:25 PM for 17:25\nIf 24h is selected, the value will be displayed in 24 hour format, ex: 17:25 for 17:25",
          "values": [
            {
              "name": "12h"
            },
            {
              "name": "24h"
            }
          ]
        },
        {
          "name": "type",
          "description": "The type of form control",
          "values": [
            {
              "name": "color"
            },
            {
              "name": "date"
            },
            {
              "name": "file"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "phone"
            },
            {
              "name": "search"
            },
            {
              "name": "text"
            },
            {
              "name": "time"
            }
          ]
        },
        {
          "name": "value",
          "description": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, date, and search inputs."
        }
      ]
    },
    {
      "name": "xpl-input-color",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Indicates whether the color picker is disabled."
        },
        {
          "name": "hide-eye-dropper",
          "description": "Hide eye dropper"
        },
        {
          "name": "placeholder",
          "description": "Placeholder text for the color input.\nThis is used when no color is selected."
        },
        {
          "name": "required",
          "description": "Indicates whether the color picker is required."
        },
        {
          "name": "value",
          "description": "The color value of the picker."
        }
      ]
    },
    {
      "name": "xpl-input-date",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "date-format",
          "description": "The date format to use for the datepicker input.\nThis is used by flatpickr to format the date.\nDefault is 'Y-m-d' (e.g., 2023-10-01).\n\nSee https://flatpickr.js.org/formatting/ for more details."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled"
        },
        {
          "name": "input-id",
          "description": "The `inputId` is used to associate the input with a label."
        },
        {
          "name": "max",
          "description": "Maximum value for the input."
        },
        {
          "name": "min",
          "description": "The minimum value for the input."
        },
        {
          "name": "mode",
          "description": "For datepicker inputs, whether to allow only a single\ndate or a range of dates. (Multiple non-consecutive\ndates planned to be supported in the future.)",
          "values": [
            {
              "name": "range"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "name",
          "description": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data.\n\nApplies to all input types."
        },
        {
          "name": "placeholder",
          "description": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, and date inputs."
        },
        {
          "name": "post",
          "description": "A string (recommended max 3 characters) that gets shown\nvisually to the left of (before) the input."
        },
        {
          "name": "pre",
          "description": "A string (recommended max 8 characters) that gets shown\nvisually to the right of (after) the input."
        },
        {
          "name": "readonly",
          "description": "Whether the input is editable"
        },
        {
          "name": "required",
          "description": "Whether the input is required"
        },
        {
          "name": "value",
          "description": "Including a `value` will pre-populate the input\nwith the given string."
        }
      ]
    },
    {
      "name": "xpl-input-file",
      "description": {
        "kind": "markdown",
        "value": "`xpl-input-file` is a component that allows users to upload files."
      },
      "attributes": [
        {
          "name": "_id",
          "description": "Because `id` is a reserved HTMLElement attribute,\nwe prefix it with an underscore here so that it\ndoesn't get automatically applied to the outer container."
        },
        {
          "name": "accept",
          "description": "The accepted file types for the file input.\nCorresponds to the `accept` attribute on the input element.\nExample: 'image/*' for all image types, '.pdf' for PDF files, etc."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled"
        },
        {
          "name": "hide-accept-text",
          "description": "Hides the \"Accept\" text that indicates the accepted file types"
        },
        {
          "name": "hide-file-names",
          "description": "Hides the file names in the file upload component"
        },
        {
          "name": "hide-trigger-on-select",
          "description": "Hides the trigger element when a file is selected."
        },
        {
          "name": "multiple",
          "description": "Whether the user can select multiple files at once.\nCorresponds to the `multiple` attribute on the input element."
        },
        {
          "name": "name",
          "description": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
        }
      ]
    },
    {
      "name": "xpl-input-phone",
      "description": {
        "kind": "markdown",
        "value": "The Phone Input Field allows users to input properly formatted phone numbers. It supports two modes: **international** (country selector + dial code prefix) and **domestic** (single country, no selector). Used as a subcomponent of `xpl-input` when `type=\"phone\"`. The value is always emitted in **E.164** format (e.g. `+14155551234`)."
      },
      "attributes": [
        {
          "name": "default-country",
          "description": "Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. \"US\"."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled"
        },
        {
          "name": "error",
          "description": "Whether the field is in an error state. When true, the input renders with\nthe error border styling. The error message itself is owned by the parent\n`xpl-input` wrapper."
        },
        {
          "name": "input-id",
          "description": "The `inputId` is used to associate the input with a label."
        },
        {
          "name": "is-international",
          "description": "Enables international mode with a country selector and dial code prefix.\nWhen false, the input is locked to `defaultCountry` with no country picker\nand no dial code shown in the display value. Emitted value is still E.164."
        },
        {
          "name": "name",
          "description": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
        },
        {
          "name": "placeholder",
          "description": "Placeholder text that appears when the field has no value"
        },
        {
          "name": "readonly",
          "description": "Whether the input is editable"
        },
        {
          "name": "required",
          "description": "Whether the input is required"
        },
        {
          "name": "value",
          "description": "Including a `value` will pre-populate the input (E.164 format, e.g. +14155551234)."
        }
      ]
    },
    {
      "name": "xpl-input-search",
      "description": {
        "kind": "markdown",
        "value": "Inner search field used by [`xpl-input`](../readme.md) when `type=\"search\"`. It provides a leading magnifier, a native text field with `role=\"searchbox\"`, an optional clear control, and a `shape` shell (`rounded` pill vs `box`). You normally consume search through **`xpl-input`**; use `xpl-input-search` only when composing a custom shell that still matches Apollo search visuals."
      },
      "attributes": [
        {
          "name": "aria-label",
          "description": "Accessible name when there is no visible label from the parent; maps to `aria-label` on the input.\nWhen the parent provides a visible label, the input is named by `<label for=\"…\">` — this prop is ignored for naming.\nEmpty or whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed."
        },
        {
          "name": "autocomplete",
          "description": "Passed to the native input (`autocomplete` attribute). Default `off` matches common\ninline-search UX; browsers may still apply heuristics."
        },
        {
          "name": "disabled",
          "description": "Disables the field and clear control."
        },
        {
          "name": "error-message-id",
          "description": "Element id for `aria-describedby` when `hasError` (error message lives on `xpl-input`)."
        },
        {
          "name": "has-error",
          "description": "Set by `xpl-input` when `error` is shown — drives `aria-invalid` / `aria-describedby`."
        },
        {
          "name": "has-visible-label",
          "description": "When true, parent `xpl-input` renders a visible label — omit `aria-label` on the input."
        },
        {
          "name": "input-id",
          "description": "Associates the control with the parent `xpl-input` label (`for` / `id`)."
        },
        {
          "name": "name",
          "description": "Form field `name` on the native input."
        },
        {
          "name": "placeholder",
          "description": "Placeholder shown when the value is empty."
        },
        {
          "name": "readonly",
          "description": "Whether the input is editable."
        },
        {
          "name": "required",
          "description": "Whether the input is required."
        },
        {
          "name": "shape",
          "description": "Shell corner radius: `rounded` (pill) or `box` (rounded rectangle).",
          "values": [
            {
              "name": "box"
            },
            {
              "name": "rounded"
            }
          ]
        },
        {
          "name": "value",
          "description": "Current value (controlled-friendly)."
        }
      ]
    },
    {
      "name": "xpl-input-time",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "allow-custom-option",
          "description": "For time inputs, whether to allow custom option in the input even if not available in the dropdown.\nExample: A step of 30 minutes will allow 15:03, 15:37, etc.\n\nApplies to time inputs."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled"
        },
        {
          "name": "input-id",
          "description": "The `inputId` is used to associate the input with a label."
        },
        {
          "name": "max",
          "description": "Maximum value for the input."
        },
        {
          "name": "min",
          "description": "The minimum value for the input."
        },
        {
          "name": "mode",
          "description": "Whether the input is a single time or a range of times.\n\nCurrently, only single time is supported.",
          "values": [
            {
              "name": "range"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "name",
          "description": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data.\n\nApplies to all input types."
        },
        {
          "name": "placeholder",
          "description": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, and date inputs."
        },
        {
          "name": "readonly",
          "description": "Whether the input is editable"
        },
        {
          "name": "required",
          "description": "Whether the input is required"
        },
        {
          "name": "step",
          "description": "Time increment for dropdown options"
        },
        {
          "name": "time-format",
          "description": "The time format to display for the input.",
          "values": [
            {
              "name": "12h"
            },
            {
              "name": "24h"
            }
          ]
        },
        {
          "name": "value",
          "description": "Including a `value` will pre-populate the input\nwith the given string.\n\nMust be in 24 hour format, ex: 15:25 for 3:25 PM"
        }
      ]
    },
    {
      "name": "xpl-large-card",
      "description": {
        "kind": "markdown",
        "value": "A card is a container and can contain any type of information. Cards contain actions and a content slot. Cards are flexible and can be arranged in grids or lists."
      },
      "attributes": [
        {
          "name": "description",
          "description": "Description of the Card"
        },
        {
          "name": "link",
          "description": "Whether the card is a link or not"
        },
        {
          "name": "name",
          "description": "Name of the Card"
        }
      ]
    },
    {
      "name": "xpl-list",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "label",
          "description": "Accessible name for the list, exposed as `aria-label` on the host when set.\nUse when the list has no visible heading.\nIgnored when `labelledBy` is set (see `labelledBy` for precedence)."
        },
        {
          "name": "labelled-by",
          "description": "Element id(s) that label this list (space-separated), exposed as `aria-labelledby` when set.\nWhen set, `label` is not applied as `aria-label` so the list has a single naming source."
        },
        {
          "name": "reorderable",
          "description": "When true, enables reorder UI and behavior for **slot-based** child rows (drag handle + keyboard).\nLegacy rows rendered from the deprecated `items` prop do **not** show a drag handle; migrate to slots if reorder is required."
        },
        {
          "name": "selectable",
          "description": "Determines if this list is selectable (shows `xpl-radio` per row in a shared group).\nPress Escape while focus is on the **selected** row to clear selection (same as `clearSelection()`)."
        }
      ]
    },
    {
      "name": "xpl-list-item",
      "description": {
        "kind": "markdown",
        "value": "Single row for [`xpl-list`](../xpl-list/readme.md). **Slot-based** rows expose `role=\"listitem\"` on the inner row surface (`.xpl-list-item__wrapper` or `.xpl-list-item__listitem-shell` when `href` is set); **legacy** `item` rows use `role=\"listitem\"` on the host. Hand-written integration notes for slots, attributes, and events live in the [list readme](../xpl-list/readme.md); the section below is Stencil-generated API for this component.\n\n**Reorder handle (slot mode):** When `reorderable` is enabled and the row uses **slot-based** content, the handle is an **`xpl-button`** wrapping a native **`<button>`**. Reorder logic is wired on the **`xpl-button` host** (`mousedown` / `keydown`); those events originate on the inner `<button>` and **bubble** to the host, which is how the list item receives them today. If `xpl-button` ever stopped bubbling for those events, reorder handlers would need to attach directly to the inner button (similar to `componentDidRender` syncing `aria-*` on that element).\n\n**Legacy `item` prop:** Prop-driven rows **do not** render the reorder handle, radios, or keyboard reorder affordances. Parent `xpl-list` **does not** set `selectable`, `radio-name`, or `reorderable` on those rows (those attributes are removed so they are not mistaken for supported behavior). Use slots if you need selection, drag, or keyboard reorder."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the item is disabled."
        },
        {
          "name": "error",
          "description": "Whether to show the item in an error state."
        },
        {
          "name": "hidden",
          "description": "When true, the row is not shown and does not participate in visible-only list behavior\n(e.g. `orderChange` / `orderedItemIds`, reorder targets). Use for filtering, conditional\ndisplay, or keeping stable `item-id` while the row is off-screen. See `xpl-list` readme\n“Hidden rows”.\n\n**Accessibility:** Renders an empty host with the native `hidden` attribute only (no\n`role=\"listitem\"`), consistent with the row not participating as a list item while hidden."
        },
        {
          "name": "href",
          "description": "URL for link behavior. When provided, the entire row becomes clickable.\nClicks on `actions` or `avatar` slots are prevented from triggering navigation."
        },
        {
          "name": "item-id",
          "description": "Unique identifier for this item. Used for selection and drag/drop.\nMutable so the host can sync from `item-id` / `id` in `componentWillLoad` without breaking one-way data flow."
        },
        {
          "name": "keyboard-active",
          "description": "When set by the parent, indicates this item is the active keyboard reorder item."
        },
        {
          "name": "radio-name",
          "description": "Name attribute for radio inputs (shared across selectable items in a list)."
        },
        {
          "name": "reorderable",
          "description": "Whether this item is reorderable (shows a drag handle in **slot-based** layout).\nWhen the deprecated `item` prop is used, legacy markup has **no** reorder handle even if this is true."
        },
        {
          "name": "selectable",
          "description": "Whether this item is selectable (shows `xpl-radio` in a shared group)."
        },
        {
          "name": "selected",
          "description": "Whether this item is selected (radio checked state)."
        },
        {
          "name": "show-divider",
          "description": "Whether to show a divider below the item."
        },
        {
          "name": "title-badge-variant",
          "description": "Optional badge to display next to the title (dot badge).\nOnly used when `item` prop is not provided (slot mode).\nMatches `xpl-badge` variant values (e.g. purple, green, red).",
          "values": [
            {
              "name": "blue"
            },
            {
              "name": "error"
            },
            {
              "name": "gray"
            },
            {
              "name": "green"
            },
            {
              "name": "inactive"
            },
            {
              "name": "orange"
            },
            {
              "name": "purple"
            },
            {
              "name": "red"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "yellow"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-main-nav",
      "description": {
        "kind": "markdown",
        "value": "The Main Nav component contains is split in 3 areas. The top area is where the branding goes. It's divided into 2 slots `logo` and `brand-name`.\nThe middle area is where the main navigation links go. It's a `<nav>` tag with a slot named `navigation`, where a `<ul slot=\"navigation\">` with `<xpl-nav-items>` should be rendered.\n\nThe bottom area is fixed to the bottom and should be used for actions. To render content within this area use the slot `footer` with a `<ul slot=\"footer\">` tag."
      },
      "attributes": [
        {
          "name": "width",
          "description": "",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "md"
            },
            {
              "name": "sm"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-modal",
      "description": {
        "kind": "markdown",
        "value": "Modals are dialogs that focus the user’s attention exclusively on one task or piece of information via a window layer above the current content.\n\nModals are disruptive and should only be used when disrupting the user’s flow is desired."
      },
      "attributes": [
        {
          "name": "is-open",
          "description": "Whether the modal is open."
        },
        {
          "name": "size",
          "description": "The size of the modal.",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "medium"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "variant",
          "description": "The visual variant of the modal.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "warning"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-nav-header-menu",
      "description": {
        "kind": "markdown",
        "value": "Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).\nTag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is\n**`role=\"list\"`** for slotted **`xpl-top-nav-item`** (**`role=\"listitem\"`**).\n\n**Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —\nprofile, list shell, and **`xpl-top-nav-item`** **`role=\"listitem\"`** are handled by the component. Use\n**`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.\n\n**`slot=\"right-aside-mobile\"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only\nduplicate of **every** **`slot=\"right-aside\"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).\nNot **`role=\"list\"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot=\"right-aside\"`** on wider viewports.\nLight-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps\n**`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).\nStencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next\ndeferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /\n**`slot`** mutations without stacking uncancellable microtasks.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode\nvalues even when the page root is light (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**)."
      },
      "attributes": [
        {
          "name": "email",
          "description": "Email address shown below the username."
        },
        {
          "name": "username",
          "description": "Display name shown in the profile block."
        }
      ]
    },
    {
      "name": "xpl-nav-item",
      "description": {
        "kind": "markdown",
        "value": "This component should be used within sections of the `<xpl-main-nav>`. This component yields a slot named `link`, where a `<a>` tag should be used. Within the `<a>` tag, there are two slots, one named `icon`, where any svg can be placed. An an unnamed slot, where the link text should be placed."
      },
      "attributes": [
        {
          "name": "nav-control",
          "description": ""
        }
      ]
    },
    {
      "name": "xpl-pagination",
      "description": {
        "kind": "markdown",
        "value": "Pagination bar allows users to navigate pages of content.\n\n> **Note:** This component is in beta. Use with caution and expect updates before the full release."
      },
      "attributes": [
        {
          "name": "current-page",
          "description": "The current active page (1-based).\nMarked as mutable so we can update from inside this component."
        },
        {
          "name": "rows-per-page-options",
          "description": "The rows-per-page options offered in the dropdown."
        },
        {
          "name": "selected-rows-per-page",
          "description": "The currently selected rows-per-page."
        },
        {
          "name": "total-pages",
          "description": "Total number of pages."
        },
        {
          "name": "with-page-control",
          "description": "Whether to allow go to page navigation."
        }
      ]
    },
    {
      "name": "xpl-panel",
      "description": {
        "kind": "markdown",
        "value": "A stateless container that defines a section on a page and can house any\ntype of content. Panels are not dismissible and may contain a top accent."
      },
      "attributes": [
        {
          "name": "accent",
          "description": "Color accent bar displayed at the top of the panel.\n\n- `none` – no accent (default)\n- `primary` – brand primary color\n- `secondary` – brand secondary color\n- `positive` – positive / success color\n- `negative` – negative / error color\n- `highlight` – highlight / warning color",
          "values": [
            {
              "name": "highlight"
            },
            {
              "name": "negative"
            },
            {
              "name": "none"
            },
            {
              "name": "positive"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        },
        {
          "name": "padding",
          "description": "Padding density applied to the content area.\n(default and tight keep desktop padding through tablet; mobile ≤480px).\n\n- `default` – 24 px desktop & tablet / 16 px mobile\n- `tight`   – 16 px desktop & tablet / 8 px mobile\n- `loose`   – 40 px desktop / 32 px tablet / 24 px mobile",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "loose"
            },
            {
              "name": "tight"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-popover",
      "description": {
        "kind": "markdown",
        "value": "A popover is an overlay that pops up over all other layers and is triggered by a click or tap, and dismissed by clicking outside the popover or a dismiss icon. Popovers can contain additional actions and allow those actions to be triggered."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the popover is disabled or not."
        },
        {
          "name": "display",
          "description": "The display style of the popover, either as an arrow or a menu.\n- 'arrow': Displays an arrow pointing to the trigger element.\n- 'menu': Displays a menu-style popover without an arrow.",
          "values": [
            {
              "name": "arrow"
            },
            {
              "name": "menu"
            }
          ]
        },
        {
          "name": "is-open",
          "description": "Whether the popover is open by default or not."
        },
        {
          "name": "position",
          "description": "The position of the trigger element relative to the popover.",
          "values": [
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-left"
            },
            {
              "name": "bottom-middle"
            },
            {
              "name": "bottom-right"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "middle-left"
            },
            {
              "name": "middle-right"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-left"
            },
            {
              "name": "top-middle"
            },
            {
              "name": "top-right"
            },
            {
              "name": "top-start"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-progress-bar",
      "description": {
        "kind": "markdown",
        "value": "The `xpl-progress-bar` component displays the progress of an operation, such as file uploads, form completion, or loading states. It supports multiple visual variants including default, success, error, and indeterminate states, with optional label and helper text."
      },
      "attributes": [
        {
          "name": "helper-text",
          "description": "The helper text displayed below the progress bar (recommended for error state)"
        },
        {
          "name": "label",
          "description": "The label text displayed above the progress bar"
        },
        {
          "name": "max",
          "description": "The maximum value of the progress (mirrors native <progress> max attribute)"
        },
        {
          "name": "size",
          "description": "The size of the progress bar height: sm = 4px, lg = 6px",
          "values": [
            {
              "name": "lg"
            },
            {
              "name": "sm"
            }
          ]
        },
        {
          "name": "value",
          "description": "The current value of the progress (mirrors native <progress> value attribute)"
        },
        {
          "name": "variant",
          "description": "The visual variant of the progress bar",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "error"
            },
            {
              "name": "indeterminate"
            },
            {
              "name": "success"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-progress-indicator",
      "description": {
        "kind": "markdown",
        "value": "A progress indicator that guides users through linear, multi-step tasks by displaying completed, current, and future steps. Progress indicators help manage user expectations by showing their position in a multi-step process, the total number of steps, and overall progress toward task completion."
      },
      "attributes": [
        {
          "name": "current-step",
          "description": "Current step index. Steps with index < currentStep are \"finished\",\nthe step at currentStep is \"active\", and steps beyond are \"waiting\".\nSet to steps.length to mark all steps as finished.\nAutomatically clamped to [0, steps.length]."
        },
        {
          "name": "layout",
          "description": "Layout direction - 'horizontal' or 'vertical'",
          "values": [
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "show-labels",
          "description": "Whether to show step labels"
        },
        {
          "name": "show-numbers",
          "description": "Whether to show step numbers inside circles"
        }
      ]
    },
    {
      "name": "xpl-radio",
      "description": {
        "kind": "markdown",
        "value": "Radio buttons allow users to make selections or choices. Radios are always single select, and can also act as controls."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Whether the input is \"on\""
        },
        {
          "name": "description",
          "description": "Description text for the field"
        },
        {
          "name": "disabled",
          "description": "Whether the input is disabled"
        },
        {
          "name": "name",
          "description": "The name attribute for the html input.\n(submitted in form as name/value pair)"
        },
        {
          "name": "required",
          "description": "Whether the input is required"
        },
        {
          "name": "selected-value",
          "description": "The currently selected value for the radio group this radio belongs to.\n\nWhen set, the radio renders as checked when `selectedValue` equals its\nown `value` prop. Use this to drive radio-group selection from a single\nsource of truth — e.g. Vue `v-model` on a shared `selectedValue` across\nevery radio in a group, where each radio still declares its own `value`.\n\nFalls back to the boolean `checked` prop when not set."
        },
        {
          "name": "styled",
          "description": "Whether the input is contained in a box with a border and, in disabled\nstate, a background"
        },
        {
          "name": "value",
          "description": "The value attribute for the radio input.\n(submitted in form as name/value pair)"
        }
      ]
    },
    {
      "name": "xpl-secondary-nav",
      "description": {
        "kind": "markdown",
        "value": "The Secondary Nav component is a component that allows navigation within the content area. It yields one slot where a <ul> element with <xpl-nav-item> elements should be rendered."
      },
      "attributes": []
    },
    {
      "name": "xpl-select",
      "description": {
        "kind": "markdown",
        "value": "Select allows users to make a single selection or multiple selections from a list of options.  Items can be a simple list, grouped, simple multi-select. User selections typically appear within the Select Box once created unless multiple selections are made, where truncation or another method of showing these selections is required.\n\n***When the list of options contains “Actions”, use a ***[Dropdown component](https://apollo.xplordocs.com/?path=/story/components-dropdown--simple).\n\nThe `selectIcon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.\n\n---"
      },
      "attributes": [
        {
          "name": "class-names",
          "description": "The class name to apply to the select component."
        },
        {
          "name": "custom-display-value",
          "description": "If true, enables custom display value rendering via slot."
        },
        {
          "name": "description",
          "description": "Optional text that appears below the input label."
        },
        {
          "name": "disabled",
          "description": "Whether the field is disabled"
        },
        {
          "name": "dropdown-placement",
          "description": "Initial Floating UI placement for the options panel (e.g. `top-start`, `bottom-start`).\nForwarded to the inner `xpl-dropdown` when the menu is open.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "error",
          "description": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
        },
        {
          "name": "label",
          "description": "The label that appears above the select dropdown"
        },
        {
          "name": "mode",
          "description": "Whether to allow a single choice or multiple choices.",
          "values": [
            {
              "name": "multi"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the hidden input field that contains the selected option's value(s)"
        },
        {
          "name": "placeholder",
          "description": "Placeholder text that appears when the field has no value"
        },
        {
          "name": "select-icon",
          "description": "The icon to display in the select trigger button.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
        },
        {
          "name": "selected-values",
          "description": "The value(s) currently selected in the select component."
        },
        {
          "name": "truncate",
          "description": "Only used in multi-choice selects. If `true`,\nbadges representing selections that would overflow the\ncontainer are replaced with \"+x more\" (where x is the\nnumber not shown). If `false`, the container's height will\nadjust to show all badges representing selections."
        }
      ]
    },
    {
      "name": "xpl-side-nav",
      "description": {
        "kind": "markdown",
        "value": "Slot-based sidebar for app navigation: a scrollable main `section` and a fixed\n`nav-footer`. Compose with `xpl-side-nav-item` for rows.\n\n**Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a\n~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).\nActivating the toggle opens a drawer containing the `section` + `nav-footer`\ncontent behind an `xpl-backdrop` scrim. The drawer traps focus while open;\nEscape or a backdrop click closes it and returns focus to the toggle. Above\n`md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.\n\nThe toggle is always rendered (no gating prop) and hidden above the breakpoint\nin CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),\nthe `openChange` event, and the `toggle()` / `setOpen()` methods.\n\n**v2 breaking change (beta):** consumers who wrapped their own mobile toggle\naround `xpl-side-nav` should remove it — the toggle and drawer are now built in."
      },
      "attributes": [
        {
          "name": "label",
          "description": "Accessible label for the navigation landmark.\nMaps to `aria-label` on the `<nav>` element.\nRecommended when multiple navigation landmarks exist on a page\n(e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them."
        },
        {
          "name": "open",
          "description": "Whether the mobile drawer is open. Reflected to the `open` attribute so CSS and\nhost state stay in sync. Controlled (consumer owns `open`) or uncontrolled\n(built-in toggle flips it). Has no visible effect above the `md` breakpoint,\nwhere the sidebar always renders inline."
        }
      ]
    },
    {
      "name": "xpl-side-nav-item",
      "description": {
        "kind": "markdown",
        "value": "Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only\nanchor container (`link` mode). Three slot positions are available:\n\n- `slot=\"leading\"` — leading icon column (renamed from `slot=\"icon\"` in v2).\n  The `icon` prop is a convenience shorthand that renders an `xpl-icon` here\n  when no slotted `leading` content is present.\n- `slot=\"trailing\"` — trailing content (e.g. `xpl-icon icon=\"external-link\"`).\n  When `has-children` is true and no `trailing` slot content is provided, an\n  auto chevron is rendered automatically in this position: `chevron-down` when\n  collapsed, `chevron-up` when expanded.\n- default slot — nested `xpl-side-nav-item` children (expandable parents only).\n\n**v2 breaking changes (beta):**\n- `slot=\"icon\"` renamed to `slot=\"leading\"` — no alias kept.\n- Parent rows (`has-children`) now render the leading icon alongside the chevron.\n  Previously parents showed chevron + label only (no leading icon).\n- The chevron has moved from the leading position to the trailing position.\n- A slotted `slot=\"trailing\"` replaces the auto chevron on parent rows.\n\n**Migration:**\n| Before (v1) | After (v2) | Action |\n|---|---|---|\n| `slot=\"icon\"` | `slot=\"leading\"` | Rename the slot attribute |\n| Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot=\"leading\"` |\n| (no trailing slot) | `slot=\"trailing\"` | Add for custom trailing content |"
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the item is currently disabled."
        },
        {
          "name": "expanded",
          "description": "Whether the item is currently expanded (only applies when `has-children` is true)."
        },
        {
          "name": "has-children",
          "description": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with `link`. If `link` is already true, setting `has-children` is reverted."
        },
        {
          "name": "hidden",
          "description": "Whether the component is hidden."
        },
        {
          "name": "icon",
          "description": "Optional icon name; renders as the default content for `slot=\"leading\"`.\nWhen `slot=\"leading\"` content is present, this prop is ignored.\nIn v2, this prop applies to all item types including parent rows (`has-children`)."
        },
        {
          "name": "label",
          "description": "The display label for the navigation item (button / expandable rows; omit in `link` mode)."
        },
        {
          "name": "link",
          "description": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, `label` and `icon` props should not be used.\nLink mode does not support `has-children`; use the default button mode for expandable items.\nWhen `link` is true, `hasChildren` is always false."
        },
        {
          "name": "selected",
          "description": "Whether the item is currently in a selected state."
        }
      ]
    },
    {
      "name": "xpl-skeleton",
      "description": {
        "kind": "markdown",
        "value": "Skeleton components are progress indicators used for full page loading states that reduce the perception of long loading times and provide both reassurance to the user as well as clues for how the page will ultimately look. \n\nIncludes:\nComponents - Text, Shape, Data\nVariants - Text: Display, Title, Body  Shape: rectangle, pill, circle, square\nProperties - Text/Body: show 1, 2 or 3 lines\n\n**Note: The “shimmer” effect uses Tailwind’s `animated-pulse` for the duration skeletons are present. The [animated pulse](https://tailwindcss.com/docs/animation#adding-a-pulse-animation) animates the color between our `color-background-surface-transparent-10` and `color-background-surface-transparent-5` variables."
      },
      "attributes": [
        {
          "name": "class-names",
          "description": "A CSS class name to apply to the component."
        },
        {
          "name": "full-width",
          "description": "If true, the skeleton will take up the full width of its container."
        },
        {
          "name": "height",
          "description": "The height of the skeleton. (e.g. '100px', '100%', 'auto')\naccepts any valid CSS height value"
        },
        {
          "name": "margin",
          "description": "The margin of the skeleton. (e.g. '10px', '1rem', '1rem 0')\naccepts any valid CSS margin value"
        },
        {
          "name": "shape",
          "description": "The shape of the skeleton.",
          "values": [
            {
              "name": "circle"
            },
            {
              "name": "rectangle"
            },
            {
              "name": "square"
            }
          ]
        },
        {
          "name": "size",
          "description": "The predefined size of the skeleton.",
          "values": [
            {
              "name": "body"
            },
            {
              "name": "custom"
            },
            {
              "name": "display"
            },
            {
              "name": "title-1"
            },
            {
              "name": "title-2"
            },
            {
              "name": "title-3"
            },
            {
              "name": "title-4"
            },
            {
              "name": "title-5"
            }
          ]
        },
        {
          "name": "width",
          "description": "The width of the skeleton. (e.g. '100px', '100%', 'auto')\naccepts any valid CSS width value"
        }
      ]
    },
    {
      "name": "xpl-slideout",
      "description": {
        "kind": "markdown",
        "value": "Content and Footer subcomponents are optional and can be hidden.  Slideout always has a header with an X close button upper right. Slide Out Panel OPTIONALLY uses the [<xpl-backdrop>](https://apollo.xplordocs.com/?path=/story/components-backdrop--backdrop) component to overlay content and create focus on the Slide Out Panel content."
      },
      "attributes": [
        {
          "name": "backdrop",
          "description": "Whether to show a backdrop behind the slideout."
        },
        {
          "name": "is-open",
          "description": "Whether the slideout is open."
        },
        {
          "name": "show-footer",
          "description": "Whether to show the footer section in the slideout."
        },
        {
          "name": "variant",
          "description": "The visual style variant of the slideout.\nCan be 'default' or 'warning'.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "warning"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-spotlight",
      "description": {
        "kind": "markdown",
        "value": "`xpl-spotlight` renders a guided-tour callout with an anchor dot, optional media, step messaging, and prop-driven footer actions. It can either render inline using the requested `anchorPosition` or attach to a target element with Floating UI when `target` is provided."
      },
      "attributes": [
        {
          "name": "action-layout",
          "description": "Footer action layout. `default` and `dual` both render the standard Back/Next layout, while\n`single` renders a single acknowledgement CTA (e.g. \"Got it!\").\nOnly applies when `showActions` is `true`.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "dual"
            },
            {
              "name": "single"
            }
          ]
        },
        {
          "name": "anchor-position",
          "description": "Which corner of the card the anchor dot uses when not using `target`, or as the preferred side for Floating UI.",
          "values": [
            {
              "name": "bottom-left"
            },
            {
              "name": "bottom-right"
            },
            {
              "name": "top-left"
            },
            {
              "name": "top-right"
            }
          ]
        },
        {
          "name": "body",
          "description": "Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty (no fallback paragraph)."
        },
        {
          "name": "current-step",
          "description": "Current step index (1-based). Used with `totalSteps` for the step label and for disabling\ndefault Back/Next when `showSteps` is true."
        },
        {
          "name": "heading",
          "description": "Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty (no fallback title span)."
        },
        {
          "name": "is-dismissible",
          "description": "Whether to show the dismiss (close) control."
        },
        {
          "name": "is-open",
          "description": "Controls whether the spotlight is rendered. When false, the host remains in the DOM but the spotlight UI is hidden."
        },
        {
          "name": "primary-action-label",
          "description": "Label used for the default primary action button. Only applies when `showActions` is `true`."
        },
        {
          "name": "secondary-action-label",
          "description": "Label used for the default secondary action button. Only applies when `showActions` is `true`."
        },
        {
          "name": "show-actions",
          "description": "Whether to show the actions row (primary / secondary and optional step counter).\nWhen `false`, the spotlight has no action buttons — useful for single-step\ninformational callouts that rely solely on the dismiss control."
        },
        {
          "name": "show-image",
          "description": "When true, the media region is shown. Slotted `image` content is rendered when present;\notherwise the built-in placeholder UI is shown. When false, the entire media block is hidden."
        },
        {
          "name": "show-steps",
          "description": "Whether to show the step counter between actions (`currentStep` of `totalSteps`) and whether\ndefault Back/Next use step-based disabled state."
        },
        {
          "name": "target",
          "description": "CSS selector for the element this spotlight anchors to. When set, placement uses Floating UI\n(`computePosition` with `strategy: 'fixed'`, plus `flip`, `shift`, `offset`) and `autoUpdate`\nfor scroll/resize. The host receives `left` / `top` and the `xpl-spotlight--anchored` class.\nInvalid selectors are ignored; layout falls back to `anchor-position`."
        },
        {
          "name": "total-steps",
          "description": "Total number of steps (1-based upper bound). Used with `currentStep` for the step label and\nfor disabling default Back/Next when `showSteps` is true."
        }
      ]
    },
    {
      "name": "xpl-tab",
      "description": {
        "kind": "markdown",
        "value": "`xpl-tab` is the **label / trigger** for one tab in an `xpl-tabs` group. Place each instance in the **`heading`** slot of `xpl-tabs`. The **`target`** string links this tab to the matching **`xpl-tab-panel`** (same `target` value). The parent sets **`selected`** and syncs **`value`**; you normally do not set `selected` by hand.\n\nUnderline tabs render a native **`<button role=\"tab\">`**; segment tabs render **`xpl-button`** with the same tab semantics on the inner control. For variant-specific examples, icon usage, and token tables, see the matching section on the **Tabs** or **Segment control** Storybook page.\n\n**`group-disabled`** is applied by `xpl-tabs` when the group has **`disabled`**; it keeps pills and underline buttons in a disabled state together with the parent."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables this tab (pill or underline)."
        },
        {
          "name": "data-group-disabled",
          "description": "Set when the parent `xpl-tabs` has `disabled` (group-disabled)."
        },
        {
          "name": "icon",
          "description": "Optional icon name for segment-style pills (`type=\"segment\"` on parent `xpl-tabs`). Ignored for default tabs."
        },
        {
          "name": "icon-position",
          "description": "Icon position for segment-style pills.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "selected",
          "description": "Whether the tab is selected"
        },
        {
          "name": "target",
          "description": "The target of the tab, required for the tab to be selected"
        }
      ]
    },
    {
      "name": "xpl-tab-panel",
      "description": {
        "kind": "markdown",
        "value": "`xpl-tab-panel` is the **content region** for one tab. Place each panel in the **`panel`** slot of `xpl-tabs` and set **`target`** to the same string as its paired **`xpl-tab`**. Only the panel whose `target` matches the group’s selection is visible; others stay hidden via CSS until selected."
      },
      "attributes": [
        {
          "name": "selected",
          "description": "Whether the panel is selected"
        },
        {
          "name": "target",
          "description": "The target of the tab, required for the tab to be selected"
        }
      ]
    },
    {
      "name": "xpl-table",
      "description": {
        "kind": "markdown",
        "value": "Tables are used to organize and display information from a data set."
      },
      "attributes": [
        {
          "name": "freeze",
          "description": "When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container."
        },
        {
          "name": "is-sortable",
          "description": "Toggles to show the sort button on each table head"
        },
        {
          "name": "multiselect",
          "description": "Toggles a selectable checkbox for each row in the table"
        },
        {
          "name": "striped",
          "description": "Toggles an optional styling of the background of each even row of the table body."
        }
      ]
    },
    {
      "name": "xpl-table-header",
      "description": {
        "kind": "markdown",
        "value": "Component parts used to assemble the Dynamic Table.\n\n> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases."
      },
      "attributes": []
    },
    {
      "name": "xpl-table-header-cell",
      "description": {
        "kind": "markdown",
        "value": "> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases.\n\nThe `icon` property accepts icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.\n\n---"
      },
      "attributes": [
        {
          "name": "icon",
          "description": "Icon to display in the cell.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
        },
        {
          "name": "label",
          "description": ""
        },
        {
          "name": "sortable",
          "description": ""
        },
        {
          "name": "type",
          "description": "",
          "values": [
            {
              "name": "checkbox"
            },
            {
              "name": "icon"
            },
            {
              "name": "label"
            }
          ]
        },
        {
          "name": "width",
          "description": ""
        }
      ]
    },
    {
      "name": "xpl-tabs",
      "description": {
        "kind": "markdown",
        "value": "`xpl-tabs` groups related views into a single surface: users pick a **tab** to show the matching **panel**. It implements the WAI-ARIA tabs pattern with a horizontal tab list, optional full-width layout, and two visual styles—**underline** (`type=\"tabs\"`, default) and **segment** (`type=\"segment\"`, pill controls in a bordered track)—selected with the **`type`** prop. On narrow viewports the heading row is replaced by an `xpl-select` so the same targets and keyboard behavior stay consistent.\n\nThe **Tabs** and **Segment control** Storybook entries document this **one component** with different defaults and Figma references. Each page adds variant-specific guidance (when to use, examples, tokens); the sections below describe behavior that is **the same for both** styles.\n\nPair **`xpl-tab` (slot `heading`)** with **`xpl-tab-panel` (slot `panel`)** and use the same **`target`** string on each pair so selection stays in sync."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables the whole tab group (headings, mobile select, and segment pills)."
        },
        {
          "name": "full-width",
          "description": "Whether to make the tabs full width"
        },
        {
          "name": "type",
          "description": "Visual and layout variant: classic underline tabs or segment (pill) controls.",
          "values": [
            {
              "name": "segment"
            },
            {
              "name": "tabs"
            }
          ]
        },
        {
          "name": "value",
          "description": "The selected tab target value, defaults to the first tab"
        }
      ]
    },
    {
      "name": "xpl-tag",
      "description": {
        "kind": "markdown",
        "value": "Tags represent a set of interactive keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by the user. Unlike Badges, Tags are clickable, used in dropdowns, multi-select, search bars, etc."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Whether the tag is disabled"
        },
        {
          "name": "dismissible",
          "description": "Whether the tag shows a dismiss button"
        },
        {
          "name": "is-draggable",
          "description": "When true, the tag label uses native HTML5 drag (the inner label is the drag source).\nNamed `isDraggable` so the Stencil prop does not collide with the native `HTMLElement.draggable`\nAPI. `reflect: false` avoids syncing a `draggable` attribute onto the host; the inner label\nremains the drag source. Host `onDragStart` still suppresses stray native drags from host chrome."
        },
        {
          "name": "size",
          "description": "The size of the tag",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "sm"
            }
          ]
        },
        {
          "name": "tag-id",
          "description": "Optional stable id for the tag. When set, it is included in `tagDragStart` / `tagDragEnd` detail\nand written to `dataTransfer` as `application/x-tag-id`."
        }
      ]
    },
    {
      "name": "xpl-toast",
      "description": {
        "kind": "markdown",
        "value": "Toasts are brief, non-disruptive messages that provide quick, at-a-glance feedback. They can have 3 sentiments; neutral, positive and negative and contain actions such as a button or link, or a close button. Messaging can include a title and caption limited to 85 characters. Keep your toast messaging short and to the point and tone in line with the sentiment of the Toast. \n\nThe Toast component is configurable by Sentiment plus show/hide properties for Icon, Caption, Button and Dismissible. Use the nested component’s properties to customize further as needed. \n\nWhen possible, Toasts should auto-dismiss after 8 seconds. When an action is present, it may not be desirable to time out the Toast depending on your specific context.  \n\nMatch your messaging with the sentiment of the toast. Most messages will have a neutral sentiment. Reserve negative sentiments for when an explicit failure has occurred. Give users the information they need to correct the issue. \n\nToasts only support a single action and up to 85 characters. If multiple actions can be taken, or the message is longer than a few words, use a [Modal component](https://apollo.xplordocs.com/?path=/story/components-modal--modal) instead."
      },
      "attributes": [
        {
          "name": "caption",
          "description": ""
        },
        {
          "name": "dismissable",
          "description": ""
        },
        {
          "name": "show-icon",
          "description": ""
        },
        {
          "name": "timeout",
          "description": ""
        },
        {
          "name": "variant",
          "description": "",
          "values": [
            {
              "name": "neutral"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-toggle",
      "description": {
        "kind": "markdown",
        "value": "A Toggle is a type of form control that is used to switch between enabled and disabled states of an element."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Whether the toggle is `on`"
        },
        {
          "name": "description",
          "description": "The toggle's description appears *above* the toggle."
        },
        {
          "name": "disabled",
          "description": "Whether the toggle is disabled"
        },
        {
          "name": "heading",
          "description": "The toggle's heading appears *above* the toggle."
        },
        {
          "name": "label",
          "description": "The toggle's label appears *to the right of* the toggle."
        },
        {
          "name": "name",
          "description": "The name attribute for the html input.\n(submitted in form as name/value pair)"
        },
        {
          "name": "variant",
          "description": "The size of the toggle -- `default` or `small`",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "small"
            }
          ]
        }
      ]
    },
    {
      "name": "xpl-toolbar",
      "description": {
        "kind": "markdown",
        "value": "> **Note:** This component is currently in beta. Use with caution as it may have breaking changes in future releases."
      },
      "attributes": [
        {
          "name": "selected-item-count",
          "description": "The number of selected items to display in the toolbar."
        }
      ]
    },
    {
      "name": "xpl-tooltip",
      "description": {
        "kind": "markdown",
        "value": "Tooltips are intended to be short one to two sentence messages adding contextual information for the user. Keep messages short and to the point. Tooltips are static and do not contain actions, and only appear when the context is hovered.\n\nTooltip variants control one of 8 arrow positions indicating the direction the tooltip will appear in relation to it's trigger:\n\"bottom-left\" | \"bottom-middle\" | \"bottom-right\" | \"left\" | \"right\" | \"top-left\" | \"top-middle\" | \"top-right\""
      },
      "attributes": [
        {
          "name": "hide-arrow",
          "description": "Hide the arrow"
        },
        {
          "name": "position",
          "description": "Position of the tooltip relative to the element",
          "values": [
            {
              "name": "bottom-left"
            },
            {
              "name": "bottom-middle"
            },
            {
              "name": "bottom-right"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top-left"
            },
            {
              "name": "top-middle"
            },
            {
              "name": "top-right"
            }
          ]
        },
        {
          "name": "text",
          "description": "The tooltip text to display"
        }
      ]
    },
    {
      "name": "xpl-top-nav",
      "description": {
        "kind": "markdown",
        "value": "Horizontal top navigation with **`left-aside`** and a **right rail**: **`right-aside`** then **user menu**\n(see **`.xpl-top-nav__right-rail`** in `render()`). The account menu uses an internal **`xpl-popover`** (**`bottom-end`**, **`display=\"menu\"`**): built-in trigger uses **`child-account-label`** (prop / attribute) as the label beside a trailing **`chevron-down`** on **`xpl-button`** (**`icon`** / **`iconPosition=\"end\"`**), or **`slot=\"user-menu-trigger\"`** for a custom trigger; panel from **`slot=\"user-menu\"`** (e.g. **`xpl-nav-header-menu`**).\nOptional **`nav-control`** and **`navOpen`**. **`left-aside`** uses **`role=\"list\"`** for primary **`xpl-top-nav-item`** rows (**`role=\"listitem\"`** on each item host). The built-in **`xpl-top-nav__brand`** item omits **`listitem`** (it is not a child of that list). **`label`** maps to **`nav`** **`aria-label`**. Opening state is internal (not a prop) — use **`navOpen`** and host **`xpl-top-nav--open`** for styling.\n\n**Escape:** With **`nav-control`**, **Escape** closes the mobile drawer and emits **`navOpen`** **`false`** (skips while **any** descendant **`xpl-popover`** is open — detected from each popover’s inner **`.xpl-popover--is-open`** marker — or when a **`xpl-top-nav-item`** dropdown is open — capture/bubble order). Focus returns to the nav toggle after the drawer closes (**Escape** or second toggle click).\n**`xpl-top-nav-item`** **`slot=\"dropdown\"`** uses document **capture** for **Escape** first; the shell uses **bubble**\non **`ownerDocument`** so nested dropdowns close before the drawer.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens under this subtree\nresolve to dark-mode values even when the page root is light. Floating overlays (e.g. **`xpl-popover`** / **`xpl-dropdown`**\ncontent teleported outside the host) do not inherit this scope — add **`dark`** on those panels if they should match.\n\n**Layout:** **`right-aside`** and the user-menu region are wrapped internally (**`.xpl-top-nav__right-lead`**, etc.).\nConsumers should not add those BEM classes — slot content only.\n\n**Brand logo:** use **`brand-logo`** (URL) for a built-in **`<img>`**, or **`slot=\"brand-logo\"`** for custom markup (e.g. **`xpl-icon`**, SVG). When the URL prop is set, it takes precedence and the slot is not used for the image. On **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**), **`brand-name`** text is hidden in the bar (logo / slot mark only); keep a meaningful **`alt`** on **`brand-logo`** or accessible slotted mark for context.\n\n**Narrow / mobile** (same breakpoint as above): **`slot=\"left-aside\"`** is **hidden** in the bar until **`nav-control`**\nis set **and** the drawer is open (floating panel per Figma). **Without **`nav-control`**, there is no mobile drawer** —\nprimary links remain hidden below **`md`** until the viewport is wide enough for the horizontal bar. The built-in **brand**\nstays in the top bar (**hamburger → brand** when **`nav-control`** is set). **`right-aside`** is hidden in the bar on narrow\nviewports (**`top-nav.css`**, one pixel below Tailwind **`md`**); duplicate those actions into **`xpl-nav-header-menu`**\n**`slot=\"right-aside-mobile\"`** (below profile, above the list; narrow-only CSS in **`top-nav.css`**) per Figma.\n\n**Account menu vs drawer:** Opening the built-in account **`xpl-popover`** while the mobile drawer is open **closes the drawer**\nand emits **`navOpen(false)`** so the two layers do not stack."
      },
      "attributes": [
        {
          "name": "brand-href",
          "description": "Destination URL for the brand control when using native navigation (**`<a href>`**). When unset, the brand is a\n**`role=\"button\"`** control and **`brandClick`** fires on activation instead."
        },
        {
          "name": "brand-logo",
          "description": "Optional image URL for the brand mark (leading the brand row, before **`brand-name`** text). When set, renders\n**`<img class=\"xpl-top-nav__brand-logo\">`** and ignores **`slot=\"brand-logo\"`** for the mark. When unset, use\n**`slot=\"brand-logo\"`** for custom logo content."
        },
        {
          "name": "brand-name",
          "description": "Visible product / app name next to **`brand-logo`**. Omit for logo-only; provide **`brand-logo`** and/or this\nstring to show the built-in brand row (**`left-aside`** is then primary nav links only)."
        },
        {
          "name": "child-account-label",
          "description": "Label text for the built-in account menu trigger (shown **before** the **`chevron-down`** icon) when **`slot=\"user-menu\"`**\nis present and **`slot=\"user-menu-trigger\"`** is not used. When empty or whitespace-only, the trigger shows only the\nchevron and uses **`aria-label=\"Open account menu\"`** on the button."
        },
        {
          "name": "label",
          "description": "Accessible name for the `<nav>` landmark (maps to `aria-label`).\nUse a unique label when the page has multiple navigation regions (e.g. side nav + top nav).\nWhen unset, defaults to `top-navigation-bar`."
        },
        {
          "name": "nav-control",
          "description": "When true, renders the navigation control (hamburger) for toggling the left slot on small viewports.\nThe control is **hidden from the Tailwind `md` breakpoint up**; collapse/show for **`left-aside`** uses **`max-width: calc(theme('screens.md') - 1px)`** in **`top-nav.css`** (Figma’s 767px at a 16px root and default **`screens.md`**).\nReflected to the **`nav-control`** attribute so host updates (framework props) re-run **`@Watch`**: drawer state and\ndocument **Escape** handling stay in sync, the host **`xpl-top-nav--nav-control`** class toggles for **`top-nav.css`**, and\n**`navOpen(false)`** is emitted if **`nav-control`** is cleared while the drawer was open."
        }
      ]
    },
    {
      "name": "xpl-top-nav-item",
      "description": {
        "kind": "markdown",
        "value": "Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses\n**`role=\"listitem\"`** when the row participates in a list: a **`role=\"list\"`** parent, **`slot=\"left-aside\"`** on\n**`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of\n**`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is\nkept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and\non **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot=\"left-aside\"`** under **`xpl-top-nav`**) so DOM context changes\nwithout a full reconnect still re-sync. The internal\n**`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),\nas do **`slot=\"right-aside-mobile\"`** rows (not a list). **`slot=\"dropdown\"`** uses a local **`.xpl-top-nav-item__dropdown`**\npanel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.\n\n**This component does triple duty:** a plain bar item, a dropdown trigger (**`slot=\"dropdown\"`** present), and a\ndropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop\nonly applies in the row context — bar items and triggers do not show it in Figma.\n\n**Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on\ncustom trigger content — the component renders the inner wrapper and BEM elements.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode\nvalues even when the page root is light (consistent with **`xpl-top-nav`**)."
      },
      "attributes": [
        {
          "name": "active",
          "description": "When true, adds **`xpl-top-nav-item--active`** for persistent accent styling (e.g. link color on the bar, or\nchrome inside **`xpl-nav-header-menu`**). Separate from **`selected`**, which sets **`aria-current=\"page\"`** and\n**`--selected`**. Use both when the design needs “current page” semantics plus the active visual treatment."
        },
        {
          "name": "description",
          "description": "Optional description line shown below **`label`** (row context only, e.g. inside **`xpl-nav-header-menu`** /\n**`xpl-top-nav-menu`**). Ignored when **`label`** is not set."
        },
        {
          "name": "href",
          "description": "If set without **`slot=\"dropdown\"`**, the inner control renders as a native **`<a href>`** (link mode)."
        },
        {
          "name": "icon",
          "description": "Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set). Ignored when\n**`slot=\"leading-icon\"`** content is present."
        },
        {
          "name": "item-aria-label",
          "description": "Accessible name for the inner control when there is no **`label`** and no default-slot text (e.g. icon-only).\nIf omitted in that case, **`aria-label`** defaults to **`Navigation item`**. Ignored when **`label`** or default-slot\ncontent supplies a visible name."
        },
        {
          "name": "label",
          "description": "Text label. If omitted, use the default slot for custom trigger content. Long labels use **`text-ellipsis`**\non **`.xpl-top-nav-item__label`** (see `top-nav.css`); **`title`** is set to the full string for hover tooltips\nwhen the visual line clips."
        },
        {
          "name": "open",
          "description": "Whether the **`slot=\"dropdown\"`** panel is open. Reflected to the **`open`** attribute so consumers can drive it\n(controlled) or read it back (uncontrolled, toggled internally on click / hover / keyboard activation). Prefer\n**`openMenu()`** / **`closeMenu()`** / **`toggleMenu()`** over setting this directly from event handlers."
        },
        {
          "name": "open-mode",
          "description": "How the **`slot=\"dropdown\"`** panel opens. **`hover`** is gated on **`TOP_NAV_ITEM_HOVER_OPEN_MQ`**\n(hover-capable, fine pointer, **`md`** and up) — below that, or on touch / coarse-pointer devices, **`hover`**\nfalls back to click/tap. Keyboard activation (Enter / Space) always toggles regardless of **`openMode`**.",
          "values": [
            {
              "name": "click"
            },
            {
              "name": "hover"
            }
          ]
        },
        {
          "name": "selected",
          "description": "When true, sets **`aria-current=\"page\"`** and selected styling."
        }
      ]
    },
    {
      "name": "xpl-top-nav-menu",
      "description": {
        "kind": "markdown",
        "value": "Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout\n(**`slot=\"dropdown\"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile\ncascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back\nrow** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back\nrow closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring\nfocus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,\nlinks, nested dropdowns) is entirely **`xpl-top-nav-item`**.\n\n**One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced\nfrom **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the\nflyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).\n\n**Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width\n(**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the\nsame selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one\nvisual family.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens\nresolve to dark-mode values even when the page root is light (consistent with the rest of the\n**`xpl-top-nav`** family)."
      },
      "attributes": [
        {
          "name": "label",
          "description": "Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile\ncascade back row when drilling back out of this group."
        }
      ]
    },
    {
      "name": "xpl-utility-bar",
      "description": {
        "kind": "markdown",
        "value": "The utility bar is a top navigation bar. It contains 2 slots:\n\n`<slot name=\"main\"></slot>`\n\n- appears on the left side of the bar\n- items are justified to the start\n\n`<slot name=\"aside\"></slot>`\n\n- appears on the right side of the bar\n- items are justified to the end\n\nThe utility bar can have navigation items in just one or both slots.\nTo add content to the slots, just create a `<ul>` tag and target the desired slot:\n\n`<ul slot=\"main\">...</ul>`\n\n`<ul slot=\"aside\">...</ul>`"
      },
      "attributes": [
        {
          "name": "is-nav-open-at-startup",
          "description": ""
        },
        {
          "name": "nav-control",
          "description": ""
        }
      ]
    }
  ]
}