@xplortech/apollo-core 2.5.0 → 2.6.0

package/.typings/apollo-components.html-data.json

@@ -5,7 +5,7 @@
       "name": "xpl-accordion",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": [
         {
@@ -85,7 +85,7 @@
       "name": "xpl-avatar",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "An Avatar is a visual representation of a user or entity. There are 5 types of avatar Figma component; Avatar Default, Avatar Group, Avatar Profile, Avatar Text, and Avatar Clickable. Each comes in a variety of sizes, faces and placeholder colors. \n\nAvatars typically display a user’s image. When no image is available, use the first and last initial of a user’s name. The avatar can handle up to three letters.\n\nThere are 10 avatar faces and 10 corresponding colors. We suggest randomly generating placeholder colors to show a visual differentiator when multiple avatars or an avatar group is displayed."
       },
       "attributes": [
         {
@@ -162,7 +162,7 @@
       "name": "xpl-backdrop",
       "description": {
         "kind": "markdown",
-        "value": "This backdrop is used to add a transparent darker layer on top of the content area when the main nav is active."
+        "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": [
         {
@@ -175,33 +175,145 @@
       "name": "xpl-badge",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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"
+          "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": "Color styles to indicate varied states",
+          "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": {
@@ -222,24 +334,44 @@
       "name": "xpl-button",
       "description": {
         "kind": "markdown",
-        "value": "Buttons allow users to take an action.  Three sizes and three sentiments are available with leading and trailing icons. Hide an icon and the label for an icon-only button."
+        "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"
+          "description": "Whether button should be disabled"
         },
         {
           "name": "form",
-          "description": ""
+          "description": "An optional form attribute for the button if type is submit"
         },
         {
           "name": "full-width",
-          "description": "whether button should render with 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": "whether button should render 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",
@@ -247,11 +379,26 @@
         },
         {
           "name": "name",
-          "description": ""
+          "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": "",
+          "description": "Button size. Use 'default', 'xs' (extra small), or 'sm' (small).",
           "values": [
             {
               "name": "default"
@@ -281,7 +428,7 @@
         },
         {
           "name": "type",
-          "description": "",
+          "description": "HTML button type attribute.",
           "values": [
             {
               "name": "button"
@@ -296,11 +443,11 @@
         },
         {
           "name": "value",
-          "description": ""
+          "description": "Value of the button, submitted with form data. Passed through to the native button element."
         },
         {
           "name": "variant",
-          "description": "",
+          "description": "Button variant/style. Use \"primary\", \"secondary\", \"tertiary\" for new usage. \"subtle\" is deprecated but still supported for backward compatibility.",
           "values": [
             {
               "name": "primary"
@@ -310,6 +457,9 @@
             },
             {
               "name": "subtle"
+            },
+            {
+              "name": "tertiary"
             }
           ]
         }
@@ -355,7 +505,7 @@
       "name": "xpl-calendar",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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://xplor-apollo.herokuapp.com/?path=/story/components-input--datepicker)."
       },
       "attributes": [
         {
@@ -396,7 +546,7 @@
       "name": "xpl-checkbox",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls."
       },
       "attributes": [
         {
@@ -441,7 +591,7 @@
       "name": "xpl-choicelist",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": [
         {
@@ -502,7 +652,7 @@
       "name": "xpl-data-card",
       "description": {
         "kind": "markdown",
-        "value": "The `icon` and `smallStatIcon` properties accept icon names as strings. See [xpl-icon available icons](../xpl-icon/ICONS.md) for the complete list.\n\n---"
+        "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": [
         {
@@ -582,7 +732,7 @@
       "name": "xpl-divider",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "Allows for easy separation and titling of sections within forms or other content."
       },
       "attributes": [
         {
@@ -669,6 +819,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "icon",
+          "description": "optional icon name to display before the label (uses xpl-icon)"
+        },
         {
           "name": "disabled",
           "description": "whether option is disabled"
@@ -816,7 +970,7 @@
       "name": "xpl-input",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "A flexible form input that supports multiple `type` values: `text`, `number`, `password`, `date`, `time`, `file`, `color`, and `phone`. Each type delegates to a dedicated sub-component (`xpl-input-date`, `xpl-input-time`, `xpl-input-phone`, 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": [
         {
@@ -839,6 +993,10 @@
           "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."
@@ -867,6 +1025,10 @@
           "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."
@@ -962,6 +1124,9 @@
             {
               "name": "password"
             },
+            {
+              "name": "phone"
+            },
             {
               "name": "text"
             },
@@ -1115,6 +1280,51 @@
         }
       ]
     },
+    {
+      "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": "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-time",
       "description": {
@@ -1196,7 +1406,7 @@
       "name": "xpl-large-card",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": [
         {
@@ -1249,7 +1459,7 @@
       "name": "xpl-modal",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": [
         {
@@ -1302,7 +1512,7 @@
       "name": "xpl-pagination",
       "description": {
         "kind": "markdown",
-        "value": "> **Note:** This component is in beta. Use with caution and expect updates before the full release."
+        "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": [
         {
@@ -1327,11 +1537,59 @@
         }
       ]
     },
+    {
+      "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.\nResponsive: scales down at tablet and mobile breakpoints.\n\n- `default` – 24 px desktop / 16 px tablet+mobile\n- `tight`   – 16 px desktop / 8 px tablet+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": ""
+        "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": [
         {
@@ -1411,6 +1669,61 @@
         }
       ]
     },
+    {
+      "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-radio",
       "description": {
@@ -1521,6 +1834,60 @@
         }
       ]
     },
+    {
+      "name": "xpl-side-nav",
+      "description": {
+        "kind": "markdown",
+        "value": "Slot-based sidebar for app navigation: scrollable main area and a fixed footer. Compose with [`xpl-side-nav-item`](./xpl-side-nav-item) for rows in the section and footer."
+      },
+      "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": "xpl-side-nav-item",
+      "description": {
+        "kind": "markdown",
+        "value": "Row for [`xpl-side-nav`](../xpl-side-nav): place items in `slot=\"section\"` or `slot=\"nav-footer\"`. Supports **leaf** (button), **expandable** (`has-children`), and **link** (slot-only) modes, plus `selected`, `disabled`, and `hidden`."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether the component is disabled"
+        },
+        {
+          "name": "expanded",
+          "description": "Whether the item is currently expanded (only applies when hasChildren 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 <code>link</code>. If <code>link</code> is already true, setting\n<code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>,\n<code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS."
+        },
+        {
+          "name": "hidden",
+          "description": "Whether the component is hidden"
+        },
+        {
+          "name": "icon",
+          "description": "Optional icon name; default content for <code>slot=\"icon\"</code> (leaf and footer rows only).\nExpandable parents (<code>has-children</code>) do not show an icon column — only the chevron and label.\nOmit for nested children under a <code>has-children</code> parent — the icon column is hidden for sub-items."
+        },
+        {
+          "name": "label",
+          "description": "The display label for the navigation item (button / expandable rows; omit in <code>link</code> 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, <code>label</code> and <code>icon</code> props should not be used.\nLink mode does not support <code>has-children</code>; use the default button mode for expandable items.\nWhen <code>link</code> is true, <code>hasChildren</code> is always false (enforced by\n<code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and\n<code>componentWillRender</code>)."
+        },
+        {
+          "name": "selected",
+          "description": "Whether the item is currently in a selected state"
+        }
+      ]
+    },
     {
       "name": "xpl-skeleton",
       "description": {