@xplortech/apollo-core 2.4.3 → 2.5.0

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

@@ -494,7 +494,7 @@
       "name": "xpl-dashboard",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The XPL-Dashboard component is a code-only utility component for responsive layouts using the XPL-Data Card component."
       },
       "attributes": []
     },
@@ -502,7 +502,7 @@
       "name": "xpl-data-card",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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---"
       },
       "attributes": [
         {
@@ -511,3670 +511,1200 @@
         },
         {
           "name": "icon",
-          "description": "An optional icon leading the header.\nUses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.",
+          "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": "ai"
-            },
-            {
-              "name": "alarm-clock"
-            },
-            {
-              "name": "alert-circle"
-            },
-            {
-              "name": "alert-hex"
-            },
-            {
-              "name": "alert-triangle"
-            },
-            {
-              "name": "apps"
-            },
-            {
-              "name": "archive"
-            },
-            {
-              "name": "arrow-down"
-            },
-            {
-              "name": "arrow-down-right"
-            },
-            {
-              "name": "arrow-left"
-            },
-            {
-              "name": "arrow-right"
-            },
-            {
-              "name": "arrow-up"
-            },
-            {
-              "name": "arrow-up-right"
-            },
-            {
-              "name": "award"
-            },
-            {
-              "name": "bell"
-            },
-            {
-              "name": "bell-slash"
-            },
-            {
-              "name": "bookmark"
-            },
-            {
-              "name": "bookmark-slash"
-            },
-            {
-              "name": "briefcase"
-            },
-            {
-              "name": "calendar"
-            },
-            {
-              "name": "calendar-month"
-            },
-            {
-              "name": "calendar-week"
-            },
-            {
-              "name": "camera"
-            },
-            {
-              "name": "cash-register"
-            },
-            {
-              "name": "check"
-            },
-            {
-              "name": "check-circle"
-            },
-            {
-              "name": "check-circle-fill"
-            },
-            {
-              "name": "chevron-down"
-            },
-            {
-              "name": "chevron-left"
-            },
-            {
-              "name": "chevron-right"
-            },
-            {
-              "name": "chevron-up"
-            },
-            {
-              "name": "chevrons-down"
-            },
-            {
-              "name": "chevrons-left"
-            },
-            {
-              "name": "chevrons-right"
-            },
-            {
-              "name": "chevrons-up"
-            },
-            {
-              "name": "circle-slash"
-            },
-            {
-              "name": "clipboard"
-            },
-            {
-              "name": "clock"
-            },
-            {
-              "name": "code-square"
-            },
-            {
-              "name": "comment"
-            },
-            {
-              "name": "comment-alt"
-            },
-            {
-              "name": "comment-check"
-            },
-            {
-              "name": "comment-closed"
-            },
-            {
-              "name": "comment-discussion"
-            },
-            {
-              "name": "comment-minus"
-            },
-            {
-              "name": "comment-plus"
-            },
-            {
-              "name": "comment-x"
-            },
-            {
-              "name": "compass"
-            },
-            {
-              "name": "credit-card"
-            },
-            {
-              "name": "dash"
-            },
-            {
-              "name": "dollar-bill"
-            },
-            {
-              "name": "dollar-sign"
-            },
-            {
-              "name": "download"
-            },
-            {
-              "name": "drag"
-            },
-            {
-              "name": "dumbbells"
-            },
-            {
-              "name": "duplicate"
-            },
-            {
-              "name": "edit"
-            },
-            {
-              "name": "expand"
-            },
-            {
-              "name": "eye"
-            },
-            {
-              "name": "eye-closed"
-            },
-            {
-              "name": "eye-droper"
-            },
-            {
-              "name": "file"
-            },
-            {
-              "name": "flag"
-            },
-            {
-              "name": "folder"
-            },
-            {
-              "name": "gear"
-            },
-            {
-              "name": "gift"
-            },
-            {
-              "name": "globe"
-            },
-            {
-              "name": "graph"
-            },
-            {
-              "name": "graph-bar"
-            },
-            {
-              "name": "grid"
-            },
-            {
-              "name": "heart"
-            },
-            {
-              "name": "home"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "kebab-horizontal"
-            },
-            {
-              "name": "kebab-vertical"
-            },
-            {
-              "name": "key"
-            },
-            {
-              "name": "law"
-            },
-            {
-              "name": "layers"
-            },
-            {
-              "name": "left-align"
-            },
-            {
-              "name": "light-bulb"
+              "name": "negative"
             },
             {
-              "name": "line"
+              "name": "neutral"
             },
             {
-              "name": "link"
-            },
+              "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": "link-external"
+              "name": "primary"
             },
             {
-              "name": "list-ordered"
-            },
+              "name": "secondary"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "xpl-divider",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "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://xplor-apollo.herokuapp.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": "list-unordered"
+              "name": "multi"
             },
             {
-              "name": "loader"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "lock"
-            },
-            {
-              "name": "mail"
-            },
-            {
-              "name": "mail-check"
-            },
-            {
-              "name": "mail-closed"
-            },
-            {
-              "name": "mail-minus"
-            },
-            {
-              "name": "mail-plus"
-            },
-            {
-              "name": "mail-x"
-            },
-            {
-              "name": "map"
-            },
-            {
-              "name": "megaphone"
-            },
-            {
-              "name": "minus-circle"
-            },
-            {
-              "name": "moon"
-            },
-            {
-              "name": "navigation"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "package"
-            },
-            {
-              "name": "paperclip"
-            },
-            {
-              "name": "pencil"
-            },
-            {
-              "name": "people"
-            },
-            {
-              "name": "percent"
-            },
-            {
-              "name": "person"
-            },
-            {
-              "name": "person-add"
-            },
-            {
-              "name": "person-circle"
-            },
-            {
-              "name": "phone"
-            },
-            {
-              "name": "phone-minus"
-            },
-            {
-              "name": "phone-pause"
-            },
-            {
-              "name": "phone-plus"
-            },
-            {
-              "name": "phone-slash"
-            },
-            {
-              "name": "phone-x"
-            },
-            {
-              "name": "pie-chart"
-            },
-            {
-              "name": "pin"
-            },
-            {
-              "name": "pin-circle"
-            },
-            {
-              "name": "pin-circle-filled"
-            },
-            {
-              "name": "pin-filled"
-            },
-            {
-              "name": "play"
-            },
-            {
-              "name": "plus"
-            },
-            {
-              "name": "plus-circle"
-            },
-            {
-              "name": "printer"
-            },
-            {
-              "name": "question"
-            },
-            {
-              "name": "refresh-cw"
-            },
-            {
-              "name": "repeat"
-            },
-            {
-              "name": "right-align"
-            },
-            {
-              "name": "rocket"
-            },
-            {
-              "name": "rotate-ccw"
-            },
-            {
-              "name": "rotate-cw"
-            },
-            {
-              "name": "save"
-            },
-            {
-              "name": "search"
-            },
-            {
-              "name": "share"
-            },
-            {
-              "name": "shopping-bag"
-            },
-            {
-              "name": "shopping-cart"
-            },
-            {
-              "name": "sign-in"
-            },
-            {
-              "name": "sign-out"
-            },
-            {
-              "name": "signature"
-            },
-            {
-              "name": "sliders-h"
-            },
-            {
-              "name": "sliders-v"
-            },
-            {
-              "name": "sort"
-            },
-            {
-              "name": "star"
-            },
-            {
-              "name": "star-fill"
-            },
-            {
-              "name": "star-half-fill"
-            },
-            {
-              "name": "sun"
-            },
-            {
-              "name": "tag"
-            },
-            {
-              "name": "three-bars"
-            },
-            {
-              "name": "time-reverse"
-            },
-            {
-              "name": "tools"
-            },
-            {
-              "name": "trashcan"
-            },
-            {
-              "name": "triangle-down"
-            },
-            {
-              "name": "triangle-left"
-            },
-            {
-              "name": "triangle-right"
-            },
-            {
-              "name": "triangle-up"
-            },
-            {
-              "name": "trophy"
-            },
-            {
-              "name": "unlock"
-            },
-            {
-              "name": "upload"
-            },
-            {
-              "name": "video-camera"
-            },
-            {
-              "name": "x"
-            },
-            {
-              "name": "x-circle"
-            },
-            {
-              "name": "x-circle-fill"
-            },
-            {
-              "name": "zoom-in"
-            },
-            {
-              "name": "zoom-out"
+              "name": "single"
             }
           ]
         },
         {
-          "name": "leading-icon",
-          "description": "Whether to display the icon or not."
+          "name": "select-on-focus",
+          "description": "whether selection should be made when focusing on interactive element"
         },
         {
-          "name": "link",
-          "description": "Whether the card is a link"
+          "name": "selected-values",
+          "description": "The currently selected value(s) in the dropdown."
         },
         {
-          "name": "name",
-          "description": "Name Term"
+          "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": "disabled",
+          "description": "whether option is disabled"
         },
         {
-          "name": "short-stat",
-          "description": "Detail, stat, or value to be displayed\nin short format. Will be rendered when card is\nsmaller than 441px."
+          "name": "selected",
+          "description": "whether option is selected"
         },
         {
-          "name": "small-stat",
-          "description": "An Optional stat further enhancing the main metric of the card."
+          "name": "label",
+          "description": "text to display for option"
         },
         {
-          "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.",
-          "values": [
-            {
-              "name": "ai"
-            },
-            {
-              "name": "alarm-clock"
-            },
-            {
-              "name": "alert-circle"
-            },
-            {
-              "name": "alert-hex"
-            },
-            {
-              "name": "alert-triangle"
-            },
-            {
-              "name": "apps"
-            },
-            {
-              "name": "archive"
-            },
-            {
-              "name": "arrow-down"
-            },
-            {
-              "name": "arrow-down-right"
-            },
-            {
-              "name": "arrow-left"
-            },
-            {
-              "name": "arrow-right"
-            },
-            {
-              "name": "arrow-up"
-            },
-            {
-              "name": "arrow-up-right"
-            },
-            {
-              "name": "award"
-            },
-            {
-              "name": "bell"
-            },
-            {
-              "name": "bell-slash"
-            },
-            {
-              "name": "bookmark"
-            },
-            {
-              "name": "bookmark-slash"
-            },
-            {
-              "name": "briefcase"
-            },
-            {
-              "name": "calendar"
-            },
-            {
-              "name": "calendar-month"
-            },
-            {
-              "name": "calendar-week"
-            },
-            {
-              "name": "camera"
-            },
-            {
-              "name": "cash-register"
-            },
-            {
-              "name": "check"
-            },
-            {
-              "name": "check-circle"
-            },
-            {
-              "name": "check-circle-fill"
-            },
-            {
-              "name": "chevron-down"
-            },
-            {
-              "name": "chevron-left"
-            },
-            {
-              "name": "chevron-right"
-            },
-            {
-              "name": "chevron-up"
-            },
-            {
-              "name": "chevrons-down"
-            },
-            {
-              "name": "chevrons-left"
-            },
-            {
-              "name": "chevrons-right"
-            },
-            {
-              "name": "chevrons-up"
-            },
-            {
-              "name": "circle-slash"
-            },
-            {
-              "name": "clipboard"
-            },
-            {
-              "name": "clock"
-            },
-            {
-              "name": "code-square"
-            },
-            {
-              "name": "comment"
-            },
-            {
-              "name": "comment-alt"
-            },
-            {
-              "name": "comment-check"
-            },
-            {
-              "name": "comment-closed"
-            },
-            {
-              "name": "comment-discussion"
-            },
-            {
-              "name": "comment-minus"
-            },
-            {
-              "name": "comment-plus"
-            },
-            {
-              "name": "comment-x"
-            },
-            {
-              "name": "compass"
-            },
-            {
-              "name": "credit-card"
-            },
-            {
-              "name": "dash"
-            },
-            {
-              "name": "dollar-bill"
-            },
-            {
-              "name": "dollar-sign"
-            },
-            {
-              "name": "download"
-            },
-            {
-              "name": "drag"
-            },
-            {
-              "name": "dumbbells"
-            },
-            {
-              "name": "duplicate"
-            },
-            {
-              "name": "edit"
-            },
-            {
-              "name": "expand"
-            },
-            {
-              "name": "eye"
-            },
-            {
-              "name": "eye-closed"
-            },
-            {
-              "name": "eye-droper"
-            },
-            {
-              "name": "file"
-            },
-            {
-              "name": "flag"
-            },
-            {
-              "name": "folder"
-            },
-            {
-              "name": "gear"
-            },
-            {
-              "name": "gift"
-            },
-            {
-              "name": "globe"
-            },
-            {
-              "name": "graph"
-            },
-            {
-              "name": "graph-bar"
-            },
-            {
-              "name": "grid"
-            },
-            {
-              "name": "heart"
-            },
-            {
-              "name": "home"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "kebab-horizontal"
-            },
-            {
-              "name": "kebab-vertical"
-            },
-            {
-              "name": "key"
-            },
-            {
-              "name": "law"
-            },
-            {
-              "name": "layers"
-            },
-            {
-              "name": "left-align"
-            },
-            {
-              "name": "light-bulb"
-            },
-            {
-              "name": "line"
-            },
-            {
-              "name": "link"
-            },
-            {
-              "name": "link-external"
-            },
-            {
-              "name": "list-ordered"
-            },
-            {
-              "name": "list-unordered"
-            },
-            {
-              "name": "loader"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "lock"
-            },
-            {
-              "name": "mail"
-            },
-            {
-              "name": "mail-check"
-            },
-            {
-              "name": "mail-closed"
-            },
-            {
-              "name": "mail-minus"
-            },
-            {
-              "name": "mail-plus"
-            },
-            {
-              "name": "mail-x"
-            },
-            {
-              "name": "map"
-            },
-            {
-              "name": "megaphone"
-            },
-            {
-              "name": "minus-circle"
-            },
-            {
-              "name": "moon"
-            },
-            {
-              "name": "navigation"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "package"
-            },
-            {
-              "name": "paperclip"
-            },
-            {
-              "name": "pencil"
-            },
-            {
-              "name": "people"
-            },
-            {
-              "name": "percent"
-            },
-            {
-              "name": "person"
-            },
-            {
-              "name": "person-add"
-            },
-            {
-              "name": "person-circle"
-            },
-            {
-              "name": "phone"
-            },
-            {
-              "name": "phone-minus"
-            },
-            {
-              "name": "phone-pause"
-            },
-            {
-              "name": "phone-plus"
-            },
-            {
-              "name": "phone-slash"
-            },
-            {
-              "name": "phone-x"
-            },
-            {
-              "name": "pie-chart"
-            },
-            {
-              "name": "pin"
-            },
-            {
-              "name": "pin-circle"
-            },
-            {
-              "name": "pin-circle-filled"
-            },
-            {
-              "name": "pin-filled"
-            },
-            {
-              "name": "play"
-            },
-            {
-              "name": "plus"
-            },
-            {
-              "name": "plus-circle"
-            },
-            {
-              "name": "printer"
-            },
-            {
-              "name": "question"
-            },
-            {
-              "name": "refresh-cw"
-            },
-            {
-              "name": "repeat"
-            },
-            {
-              "name": "right-align"
-            },
-            {
-              "name": "rocket"
-            },
-            {
-              "name": "rotate-ccw"
-            },
-            {
-              "name": "rotate-cw"
-            },
-            {
-              "name": "save"
-            },
-            {
-              "name": "search"
-            },
-            {
-              "name": "share"
-            },
-            {
-              "name": "shopping-bag"
-            },
-            {
-              "name": "shopping-cart"
-            },
-            {
-              "name": "sign-in"
-            },
-            {
-              "name": "sign-out"
-            },
-            {
-              "name": "signature"
-            },
-            {
-              "name": "sliders-h"
-            },
-            {
-              "name": "sliders-v"
-            },
-            {
-              "name": "sort"
-            },
-            {
-              "name": "star"
-            },
-            {
-              "name": "star-fill"
-            },
-            {
-              "name": "star-half-fill"
-            },
-            {
-              "name": "sun"
-            },
-            {
-              "name": "tag"
-            },
-            {
-              "name": "three-bars"
-            },
-            {
-              "name": "time-reverse"
-            },
-            {
-              "name": "tools"
-            },
-            {
-              "name": "trashcan"
-            },
-            {
-              "name": "triangle-down"
-            },
-            {
-              "name": "triangle-left"
-            },
-            {
-              "name": "triangle-right"
-            },
-            {
-              "name": "triangle-up"
-            },
-            {
-              "name": "trophy"
-            },
-            {
-              "name": "unlock"
-            },
-            {
-              "name": "upload"
-            },
-            {
-              "name": "video-camera"
-            },
-            {
-              "name": "x"
-            },
-            {
-              "name": "x-circle"
-            },
-            {
-              "name": "x-circle-fill"
-            },
-            {
-              "name": "zoom-in"
-            },
-            {
-              "name": "zoom-out"
-            }
-          ]
-        },
-        {
-          "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": ""
-      },
-      "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": ""
-      },
-      "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": "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": "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."
-      },
-      "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": ""
-      },
-      "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": "> **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",
-          "values": [
-            {
-              "name": "ai"
-            },
-            {
-              "name": "alarm-clock"
-            },
-            {
-              "name": "alert-circle"
-            },
-            {
-              "name": "alert-hex"
-            },
-            {
-              "name": "alert-triangle"
-            },
-            {
-              "name": "apps"
-            },
-            {
-              "name": "archive"
-            },
-            {
-              "name": "arrow-down"
-            },
-            {
-              "name": "arrow-down-right"
-            },
-            {
-              "name": "arrow-left"
-            },
-            {
-              "name": "arrow-right"
-            },
-            {
-              "name": "arrow-up"
-            },
-            {
-              "name": "arrow-up-right"
-            },
-            {
-              "name": "award"
-            },
-            {
-              "name": "bell"
-            },
-            {
-              "name": "bell-slash"
-            },
-            {
-              "name": "bookmark"
-            },
-            {
-              "name": "bookmark-slash"
-            },
-            {
-              "name": "briefcase"
-            },
-            {
-              "name": "calendar"
-            },
-            {
-              "name": "calendar-month"
-            },
-            {
-              "name": "calendar-week"
-            },
-            {
-              "name": "camera"
-            },
-            {
-              "name": "cash-register"
-            },
-            {
-              "name": "check"
-            },
-            {
-              "name": "check-circle"
-            },
-            {
-              "name": "check-circle-fill"
-            },
-            {
-              "name": "chevron-down"
-            },
-            {
-              "name": "chevron-left"
-            },
-            {
-              "name": "chevron-right"
-            },
-            {
-              "name": "chevron-up"
-            },
-            {
-              "name": "chevrons-down"
-            },
-            {
-              "name": "chevrons-left"
-            },
-            {
-              "name": "chevrons-right"
-            },
-            {
-              "name": "chevrons-up"
-            },
-            {
-              "name": "circle-slash"
-            },
-            {
-              "name": "clipboard"
-            },
-            {
-              "name": "clock"
-            },
-            {
-              "name": "code-square"
-            },
-            {
-              "name": "comment"
-            },
-            {
-              "name": "comment-alt"
-            },
-            {
-              "name": "comment-check"
-            },
-            {
-              "name": "comment-closed"
-            },
-            {
-              "name": "comment-discussion"
-            },
-            {
-              "name": "comment-minus"
-            },
-            {
-              "name": "comment-plus"
-            },
-            {
-              "name": "comment-x"
-            },
-            {
-              "name": "compass"
-            },
-            {
-              "name": "credit-card"
-            },
-            {
-              "name": "dash"
-            },
-            {
-              "name": "dollar-bill"
-            },
-            {
-              "name": "dollar-sign"
-            },
-            {
-              "name": "download"
-            },
-            {
-              "name": "drag"
-            },
-            {
-              "name": "dumbbells"
-            },
-            {
-              "name": "duplicate"
-            },
-            {
-              "name": "edit"
-            },
-            {
-              "name": "expand"
-            },
-            {
-              "name": "eye"
-            },
-            {
-              "name": "eye-closed"
-            },
-            {
-              "name": "eye-droper"
-            },
-            {
-              "name": "file"
-            },
-            {
-              "name": "flag"
-            },
-            {
-              "name": "folder"
-            },
-            {
-              "name": "gear"
-            },
-            {
-              "name": "gift"
-            },
-            {
-              "name": "globe"
-            },
-            {
-              "name": "graph"
-            },
-            {
-              "name": "graph-bar"
-            },
-            {
-              "name": "grid"
-            },
-            {
-              "name": "heart"
-            },
-            {
-              "name": "home"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "kebab-horizontal"
-            },
-            {
-              "name": "kebab-vertical"
-            },
-            {
-              "name": "key"
-            },
-            {
-              "name": "law"
-            },
-            {
-              "name": "layers"
-            },
-            {
-              "name": "left-align"
-            },
-            {
-              "name": "light-bulb"
-            },
-            {
-              "name": "line"
-            },
-            {
-              "name": "link"
-            },
-            {
-              "name": "link-external"
-            },
-            {
-              "name": "list-ordered"
-            },
-            {
-              "name": "list-unordered"
-            },
-            {
-              "name": "loader"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "lock"
-            },
-            {
-              "name": "mail"
-            },
-            {
-              "name": "mail-check"
-            },
-            {
-              "name": "mail-closed"
-            },
-            {
-              "name": "mail-minus"
-            },
-            {
-              "name": "mail-plus"
-            },
-            {
-              "name": "mail-x"
-            },
-            {
-              "name": "map"
-            },
-            {
-              "name": "megaphone"
-            },
-            {
-              "name": "minus-circle"
-            },
-            {
-              "name": "moon"
-            },
-            {
-              "name": "navigation"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "package"
-            },
-            {
-              "name": "paperclip"
-            },
-            {
-              "name": "pencil"
-            },
-            {
-              "name": "people"
-            },
-            {
-              "name": "percent"
-            },
-            {
-              "name": "person"
-            },
-            {
-              "name": "person-add"
-            },
-            {
-              "name": "person-circle"
-            },
-            {
-              "name": "phone"
-            },
-            {
-              "name": "phone-minus"
-            },
-            {
-              "name": "phone-pause"
-            },
-            {
-              "name": "phone-plus"
-            },
-            {
-              "name": "phone-slash"
-            },
-            {
-              "name": "phone-x"
-            },
-            {
-              "name": "pie-chart"
-            },
-            {
-              "name": "pin"
-            },
-            {
-              "name": "pin-circle"
-            },
-            {
-              "name": "pin-circle-filled"
-            },
-            {
-              "name": "pin-filled"
-            },
-            {
-              "name": "play"
-            },
-            {
-              "name": "plus"
-            },
-            {
-              "name": "plus-circle"
-            },
-            {
-              "name": "printer"
-            },
-            {
-              "name": "question"
-            },
-            {
-              "name": "refresh-cw"
-            },
-            {
-              "name": "repeat"
-            },
-            {
-              "name": "right-align"
-            },
-            {
-              "name": "rocket"
-            },
-            {
-              "name": "rotate-ccw"
-            },
-            {
-              "name": "rotate-cw"
-            },
-            {
-              "name": "save"
-            },
-            {
-              "name": "search"
-            },
-            {
-              "name": "share"
-            },
-            {
-              "name": "shopping-bag"
-            },
-            {
-              "name": "shopping-cart"
-            },
-            {
-              "name": "sign-in"
-            },
-            {
-              "name": "sign-out"
-            },
-            {
-              "name": "signature"
-            },
-            {
-              "name": "sliders-h"
-            },
-            {
-              "name": "sliders-v"
-            },
-            {
-              "name": "sort"
-            },
-            {
-              "name": "star"
-            },
-            {
-              "name": "star-fill"
-            },
-            {
-              "name": "star-half-fill"
-            },
-            {
-              "name": "sun"
-            },
-            {
-              "name": "tag"
-            },
-            {
-              "name": "three-bars"
-            },
-            {
-              "name": "time-reverse"
-            },
-            {
-              "name": "tools"
-            },
-            {
-              "name": "trashcan"
-            },
-            {
-              "name": "triangle-down"
-            },
-            {
-              "name": "triangle-left"
-            },
-            {
-              "name": "triangle-right"
-            },
-            {
-              "name": "triangle-up"
-            },
-            {
-              "name": "trophy"
-            },
-            {
-              "name": "unlock"
-            },
-            {
-              "name": "upload"
-            },
-            {
-              "name": "video-camera"
-            },
-            {
-              "name": "x"
-            },
-            {
-              "name": "x-circle"
-            },
-            {
-              "name": "x-circle-fill"
-            },
-            {
-              "name": "zoom-in"
-            },
-            {
-              "name": "zoom-out"
-            }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "Size of icon"
-        }
-      ]
-    },
-    {
-      "name": "xpl-input",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "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": "autocomplete",
-          "description": "Hint for form autofill feature\n\nApplies to text, password, number."
-        },
-        {
-          "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": "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": "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, and date 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, and date inputs."
-        },
-        {
-          "name": "required",
-          "description": "Whether the input is required\n\nApplies to all input types."
-        },
-        {
-          "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": "text"
-            },
-            {
-              "name": "time"
-            }
-          ]
-        },
-        {
-          "name": "value",
-          "description": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, and date 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-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": ""
-      },
-      "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": "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": ""
-      },
-      "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-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": "> **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-popover",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "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",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "current-step",
-          "description": "Current step, is the index of the current active step"
-        }
-      ]
-    },
-    {
-      "name": "xpl-radio",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "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(submittted 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, in disabled\nstate, a background"
-        },
-        {
-          "name": "value",
-          "description": "The value attribute for the radio input.\n(submittted 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": ""
-      },
-      "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": "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.",
-          "values": [
-            {
-              "name": "ai"
-            },
-            {
-              "name": "alarm-clock"
-            },
-            {
-              "name": "alert-circle"
-            },
-            {
-              "name": "alert-hex"
-            },
-            {
-              "name": "alert-triangle"
-            },
-            {
-              "name": "apps"
-            },
-            {
-              "name": "archive"
-            },
-            {
-              "name": "arrow-down"
-            },
-            {
-              "name": "arrow-down-right"
-            },
-            {
-              "name": "arrow-left"
-            },
-            {
-              "name": "arrow-right"
-            },
-            {
-              "name": "arrow-up"
-            },
-            {
-              "name": "arrow-up-right"
-            },
-            {
-              "name": "award"
-            },
-            {
-              "name": "bell"
-            },
-            {
-              "name": "bell-slash"
-            },
-            {
-              "name": "bookmark"
-            },
-            {
-              "name": "bookmark-slash"
-            },
-            {
-              "name": "briefcase"
-            },
-            {
-              "name": "calendar"
-            },
-            {
-              "name": "calendar-month"
-            },
-            {
-              "name": "calendar-week"
-            },
-            {
-              "name": "camera"
-            },
-            {
-              "name": "cash-register"
-            },
-            {
-              "name": "check"
-            },
-            {
-              "name": "check-circle"
-            },
-            {
-              "name": "check-circle-fill"
-            },
-            {
-              "name": "chevron-down"
-            },
-            {
-              "name": "chevron-left"
-            },
-            {
-              "name": "chevron-right"
-            },
-            {
-              "name": "chevron-up"
-            },
-            {
-              "name": "chevrons-down"
-            },
-            {
-              "name": "chevrons-left"
-            },
-            {
-              "name": "chevrons-right"
-            },
-            {
-              "name": "chevrons-up"
-            },
-            {
-              "name": "circle-slash"
-            },
-            {
-              "name": "clipboard"
-            },
-            {
-              "name": "clock"
-            },
-            {
-              "name": "code-square"
-            },
-            {
-              "name": "comment"
-            },
-            {
-              "name": "comment-alt"
-            },
-            {
-              "name": "comment-check"
-            },
-            {
-              "name": "comment-closed"
-            },
-            {
-              "name": "comment-discussion"
-            },
-            {
-              "name": "comment-minus"
-            },
-            {
-              "name": "comment-plus"
-            },
-            {
-              "name": "comment-x"
-            },
-            {
-              "name": "compass"
-            },
-            {
-              "name": "credit-card"
-            },
-            {
-              "name": "dash"
-            },
-            {
-              "name": "dollar-bill"
-            },
-            {
-              "name": "dollar-sign"
-            },
-            {
-              "name": "download"
-            },
-            {
-              "name": "drag"
-            },
-            {
-              "name": "dumbbells"
-            },
-            {
-              "name": "duplicate"
-            },
-            {
-              "name": "edit"
-            },
-            {
-              "name": "expand"
-            },
-            {
-              "name": "eye"
-            },
-            {
-              "name": "eye-closed"
-            },
-            {
-              "name": "eye-droper"
-            },
-            {
-              "name": "file"
-            },
-            {
-              "name": "flag"
-            },
-            {
-              "name": "folder"
-            },
-            {
-              "name": "gear"
-            },
-            {
-              "name": "gift"
-            },
-            {
-              "name": "globe"
-            },
-            {
-              "name": "graph"
-            },
-            {
-              "name": "graph-bar"
-            },
-            {
-              "name": "grid"
-            },
-            {
-              "name": "heart"
-            },
-            {
-              "name": "home"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "kebab-horizontal"
-            },
-            {
-              "name": "kebab-vertical"
-            },
-            {
-              "name": "key"
-            },
-            {
-              "name": "law"
-            },
-            {
-              "name": "layers"
-            },
-            {
-              "name": "left-align"
-            },
-            {
-              "name": "light-bulb"
-            },
-            {
-              "name": "line"
-            },
-            {
-              "name": "link"
-            },
-            {
-              "name": "link-external"
-            },
-            {
-              "name": "list-ordered"
-            },
-            {
-              "name": "list-unordered"
-            },
-            {
-              "name": "loader"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "lock"
-            },
-            {
-              "name": "mail"
-            },
-            {
-              "name": "mail-check"
-            },
-            {
-              "name": "mail-closed"
-            },
-            {
-              "name": "mail-minus"
-            },
-            {
-              "name": "mail-plus"
-            },
-            {
-              "name": "mail-x"
-            },
-            {
-              "name": "map"
-            },
-            {
-              "name": "megaphone"
-            },
-            {
-              "name": "minus-circle"
-            },
-            {
-              "name": "moon"
-            },
-            {
-              "name": "navigation"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "package"
-            },
-            {
-              "name": "paperclip"
-            },
-            {
-              "name": "pencil"
-            },
-            {
-              "name": "people"
-            },
-            {
-              "name": "percent"
-            },
-            {
-              "name": "person"
-            },
-            {
-              "name": "person-add"
-            },
-            {
-              "name": "person-circle"
-            },
-            {
-              "name": "phone"
-            },
-            {
-              "name": "phone-minus"
-            },
-            {
-              "name": "phone-pause"
-            },
-            {
-              "name": "phone-plus"
-            },
-            {
-              "name": "phone-slash"
-            },
-            {
-              "name": "phone-x"
-            },
-            {
-              "name": "pie-chart"
-            },
-            {
-              "name": "pin"
-            },
-            {
-              "name": "pin-circle"
-            },
-            {
-              "name": "pin-circle-filled"
-            },
-            {
-              "name": "pin-filled"
-            },
-            {
-              "name": "play"
-            },
-            {
-              "name": "plus"
-            },
-            {
-              "name": "plus-circle"
-            },
-            {
-              "name": "printer"
-            },
-            {
-              "name": "question"
-            },
-            {
-              "name": "refresh-cw"
-            },
-            {
-              "name": "repeat"
-            },
-            {
-              "name": "right-align"
-            },
-            {
-              "name": "rocket"
-            },
-            {
-              "name": "rotate-ccw"
-            },
-            {
-              "name": "rotate-cw"
-            },
-            {
-              "name": "save"
-            },
-            {
-              "name": "search"
-            },
-            {
-              "name": "share"
-            },
-            {
-              "name": "shopping-bag"
-            },
-            {
-              "name": "shopping-cart"
-            },
-            {
-              "name": "sign-in"
-            },
-            {
-              "name": "sign-out"
-            },
-            {
-              "name": "signature"
-            },
-            {
-              "name": "sliders-h"
-            },
-            {
-              "name": "sliders-v"
-            },
-            {
-              "name": "sort"
-            },
-            {
-              "name": "star"
-            },
-            {
-              "name": "star-fill"
-            },
-            {
-              "name": "star-half-fill"
-            },
-            {
-              "name": "sun"
-            },
-            {
-              "name": "tag"
-            },
-            {
-              "name": "three-bars"
-            },
-            {
-              "name": "time-reverse"
-            },
-            {
-              "name": "tools"
-            },
-            {
-              "name": "trashcan"
-            },
-            {
-              "name": "triangle-down"
-            },
-            {
-              "name": "triangle-left"
-            },
-            {
-              "name": "triangle-right"
-            },
-            {
-              "name": "triangle-up"
-            },
-            {
-              "name": "trophy"
-            },
-            {
-              "name": "unlock"
-            },
-            {
-              "name": "upload"
-            },
-            {
-              "name": "video-camera"
-            },
-            {
-              "name": "x"
-            },
-            {
-              "name": "x-circle"
-            },
-            {
-              "name": "x-circle-fill"
-            },
-            {
-              "name": "zoom-in"
-            },
-            {
-              "name": "zoom-out"
-            }
-          ]
-        },
-        {
-          "name": "selected-values",
-          "description": "The value(s) currently selected in the select component."
+          "name": "subtitle",
+          "description": "optional subtitle text to display below label"
         },
         {
-          "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": "value",
+          "description": "The selected options value to be submitted with the form, should this option be selected."
         }
       ]
     },
     {
-      "name": "xpl-skeleton",
+      "name": "xpl-dynamic-table",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": "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": "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": "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": "disabled",
+          "description": "Whether the row and its cells are disabled."
         },
         {
-          "name": "width",
-          "description": "The width of the skeleton. (e.g. '100px', '100%', 'auto')\naccepts any valid CSS width value"
+          "name": "selected",
+          "description": "Whether the row is selected."
         }
       ]
     },
     {
-      "name": "xpl-slideout",
+      "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": "backdrop",
-          "description": "Whether to show a backdrop behind the slideout."
+          "name": "lg",
+          "description": "The number of columns the element should span  out of a 6 column grid on a\n lg size screen"
         },
         {
-          "name": "is-open",
-          "description": "Whether the slideout is open."
+          "name": "md",
+          "description": "The number of columns the element should span  out of a 6 column grid on a\n md size screen"
         },
         {
-          "name": "show-footer",
-          "description": "Whether to show the footer section in the slideout."
+          "name": "sm",
+          "description": "The number of columns the element should span  out of a 6 column grid on a\n sm size screen"
         },
         {
-          "name": "variant",
-          "description": "The visual style variant of the slideout.\nCan be 'default' or 'warning'.",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "warning"
-            }
-          ]
+          "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-tab",
+      "name": "xpl-header-accordion",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": "selected",
-          "description": "Whether the tab is selected"
+          "name": "content-id",
+          "description": "The id of the content region controlled by the accordion."
         },
         {
-          "name": "target",
-          "description": "The target of the tab, required for the tab to be selected"
+          "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-tab-panel",
+      "name": "xpl-icon",
       "description": {
         "kind": "markdown",
         "value": ""
       },
       "attributes": [
         {
-          "name": "selected",
-          "description": "Whether the panel is selected"
+          "name": "background-color",
+          "description": "Icon's background color."
         },
         {
-          "name": "target",
-          "description": "The target of the tab, required for the tab to be selected"
+          "name": "icon",
+          "description": "Name of icon."
+        },
+        {
+          "name": "size",
+          "description": "Size of icon"
         }
       ]
     },
     {
-      "name": "xpl-table",
+      "name": "xpl-input",
       "description": {
         "kind": "markdown",
         "value": ""
       },
       "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": "_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": "autocomplete",
+          "description": "Hint for form autofill feature\n\nApplies to text, password, number."
+        },
+        {
+          "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": "is-sortable",
-          "description": "Toggles to show the sort button on each table head"
+          "name": "description",
+          "description": "Optional text that appears below the input label.\n\nApplies to all input types."
         },
         {
-          "name": "multiselect",
-          "description": "Toggles a selectable checkbox for each row in the table"
+          "name": "disabled",
+          "description": "Whether the field is disabled\n\nApplies to all input types."
         },
         {
-          "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": "> **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."
-      },
-      "attributes": [
-        {
-          "name": "icon",
-          "description": "",
-          "values": [
-            {
-              "name": "ai"
-            },
-            {
-              "name": "alarm-clock"
-            },
-            {
-              "name": "alert-circle"
-            },
-            {
-              "name": "alert-hex"
-            },
-            {
-              "name": "alert-triangle"
-            },
-            {
-              "name": "apps"
-            },
-            {
-              "name": "archive"
-            },
-            {
-              "name": "arrow-down"
-            },
-            {
-              "name": "arrow-down-right"
-            },
-            {
-              "name": "arrow-left"
-            },
-            {
-              "name": "arrow-right"
-            },
-            {
-              "name": "arrow-up"
-            },
-            {
-              "name": "arrow-up-right"
-            },
-            {
-              "name": "award"
-            },
-            {
-              "name": "bell"
-            },
-            {
-              "name": "bell-slash"
-            },
-            {
-              "name": "bookmark"
-            },
-            {
-              "name": "bookmark-slash"
-            },
-            {
-              "name": "briefcase"
-            },
-            {
-              "name": "calendar"
-            },
-            {
-              "name": "calendar-month"
-            },
-            {
-              "name": "calendar-week"
-            },
-            {
-              "name": "camera"
-            },
-            {
-              "name": "cash-register"
-            },
-            {
-              "name": "check"
-            },
-            {
-              "name": "check-circle"
-            },
-            {
-              "name": "check-circle-fill"
-            },
-            {
-              "name": "chevron-down"
-            },
-            {
-              "name": "chevron-left"
-            },
-            {
-              "name": "chevron-right"
-            },
-            {
-              "name": "chevron-up"
-            },
-            {
-              "name": "chevrons-down"
-            },
-            {
-              "name": "chevrons-left"
-            },
-            {
-              "name": "chevrons-right"
-            },
-            {
-              "name": "chevrons-up"
-            },
-            {
-              "name": "circle-slash"
-            },
-            {
-              "name": "clipboard"
-            },
-            {
-              "name": "clock"
-            },
-            {
-              "name": "code-square"
-            },
-            {
-              "name": "comment"
-            },
-            {
-              "name": "comment-alt"
-            },
-            {
-              "name": "comment-check"
-            },
-            {
-              "name": "comment-closed"
-            },
-            {
-              "name": "comment-discussion"
-            },
-            {
-              "name": "comment-minus"
-            },
-            {
-              "name": "comment-plus"
-            },
-            {
-              "name": "comment-x"
-            },
-            {
-              "name": "compass"
-            },
-            {
-              "name": "credit-card"
-            },
-            {
-              "name": "dash"
-            },
-            {
-              "name": "dollar-bill"
-            },
-            {
-              "name": "dollar-sign"
-            },
-            {
-              "name": "download"
-            },
-            {
-              "name": "drag"
-            },
-            {
-              "name": "dumbbells"
-            },
-            {
-              "name": "duplicate"
-            },
-            {
-              "name": "edit"
-            },
-            {
-              "name": "expand"
-            },
-            {
-              "name": "eye"
-            },
-            {
-              "name": "eye-closed"
-            },
-            {
-              "name": "eye-droper"
-            },
-            {
-              "name": "file"
-            },
-            {
-              "name": "flag"
-            },
-            {
-              "name": "folder"
-            },
-            {
-              "name": "gear"
-            },
-            {
-              "name": "gift"
-            },
-            {
-              "name": "globe"
-            },
-            {
-              "name": "graph"
-            },
-            {
-              "name": "graph-bar"
-            },
-            {
-              "name": "grid"
-            },
-            {
-              "name": "heart"
-            },
-            {
-              "name": "home"
-            },
-            {
-              "name": "image"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "kebab-horizontal"
-            },
-            {
-              "name": "kebab-vertical"
-            },
-            {
-              "name": "key"
-            },
-            {
-              "name": "law"
-            },
-            {
-              "name": "layers"
-            },
-            {
-              "name": "left-align"
-            },
-            {
-              "name": "light-bulb"
-            },
-            {
-              "name": "line"
-            },
-            {
-              "name": "link"
-            },
-            {
-              "name": "link-external"
-            },
-            {
-              "name": "list-ordered"
-            },
-            {
-              "name": "list-unordered"
-            },
-            {
-              "name": "loader"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "lock"
-            },
-            {
-              "name": "mail"
-            },
-            {
-              "name": "mail-check"
-            },
-            {
-              "name": "mail-closed"
-            },
-            {
-              "name": "mail-minus"
-            },
-            {
-              "name": "mail-plus"
-            },
-            {
-              "name": "mail-x"
-            },
-            {
-              "name": "map"
-            },
-            {
-              "name": "megaphone"
-            },
-            {
-              "name": "minus-circle"
-            },
-            {
-              "name": "moon"
-            },
-            {
-              "name": "navigation"
-            },
-            {
-              "name": "organization"
-            },
-            {
-              "name": "package"
-            },
-            {
-              "name": "paperclip"
-            },
-            {
-              "name": "pencil"
-            },
-            {
-              "name": "people"
-            },
-            {
-              "name": "percent"
-            },
-            {
-              "name": "person"
-            },
-            {
-              "name": "person-add"
-            },
-            {
-              "name": "person-circle"
-            },
-            {
-              "name": "phone"
-            },
+          "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": "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": "phone-minus"
+              "name": "range"
             },
             {
-              "name": "phone-pause"
-            },
+              "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, and date 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, and date inputs."
+        },
+        {
+          "name": "required",
+          "description": "Whether the input is required\n\nApplies to all input types."
+        },
+        {
+          "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": "phone-plus"
+              "name": "12h"
             },
             {
-              "name": "phone-slash"
-            },
+              "name": "24h"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "The type of form control",
+          "values": [
             {
-              "name": "phone-x"
+              "name": "color"
             },
             {
-              "name": "pie-chart"
+              "name": "date"
             },
             {
-              "name": "pin"
+              "name": "file"
             },
             {
-              "name": "pin-circle"
+              "name": "number"
             },
             {
-              "name": "pin-circle-filled"
+              "name": "password"
             },
             {
-              "name": "pin-filled"
+              "name": "text"
             },
             {
-              "name": "play"
-            },
+              "name": "time"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, and date 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": "plus"
+              "name": "range"
             },
             {
-              "name": "plus-circle"
-            },
+              "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-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": "printer"
+              "name": "range"
             },
             {
-              "name": "question"
-            },
+              "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": "refresh-cw"
+              "name": "12h"
             },
             {
-              "name": "repeat"
-            },
+              "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": ""
+      },
+      "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": "A list item is a card with interactive states. List items allow users to select items from a list of items and view more information or make edits."
+      },
+      "attributes": []
+    },
+    {
+      "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": "right-align"
+              "name": "default"
             },
             {
-              "name": "rocket"
+              "name": "md"
             },
             {
-              "name": "rotate-ccw"
-            },
+              "name": "sm"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "xpl-modal",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "is-open",
+          "description": "Whether the modal is open."
+        },
+        {
+          "name": "size",
+          "description": "The size of the modal.",
+          "values": [
             {
-              "name": "rotate-cw"
+              "name": "large"
             },
             {
-              "name": "save"
+              "name": "medium"
             },
             {
-              "name": "search"
-            },
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The visual variant of the modal.",
+          "values": [
             {
-              "name": "share"
+              "name": "default"
             },
             {
-              "name": "shopping-bag"
-            },
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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": "> **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-popover",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "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": "shopping-cart"
+              "name": "arrow"
             },
             {
-              "name": "sign-in"
-            },
+              "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": "sign-out"
+              "name": "bottom-end"
             },
             {
-              "name": "signature"
+              "name": "bottom-left"
             },
             {
-              "name": "sliders-h"
+              "name": "bottom-middle"
             },
             {
-              "name": "sliders-v"
+              "name": "bottom-right"
             },
             {
-              "name": "sort"
+              "name": "bottom-start"
             },
             {
-              "name": "star"
+              "name": "middle-left"
             },
             {
-              "name": "star-fill"
+              "name": "middle-right"
             },
             {
-              "name": "star-half-fill"
+              "name": "top-end"
             },
             {
-              "name": "sun"
+              "name": "top-left"
             },
             {
-              "name": "tag"
+              "name": "top-middle"
             },
             {
-              "name": "three-bars"
+              "name": "top-right"
             },
             {
-              "name": "time-reverse"
-            },
+              "name": "top-start"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "xpl-progress",
+      "description": {
+        "kind": "markdown",
+        "value": "A progress indicator guides users through any linear, multi-step task by showing the user their completed, current, and future steps.\n\nProgress indicators help manage a user’s expectations when completing a multistep process. They show which step the user is currently on, the total number of steps, and overall progress in completing a task.\n\nHorizontal Progress Indicator is used in most desktop applications where a stepped process is required to finish a task and it is beneficial to the user to see their progress. This creates confidence in the user and sets expectations for the length and complexity of the process."
+      },
+      "attributes": [
+        {
+          "name": "current-step",
+          "description": "Current step, is the index of the current active step"
+        }
+      ]
+    },
+    {
+      "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(submittted 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, in disabled\nstate, a background"
+        },
+        {
+          "name": "value",
+          "description": "The value attribute for the radio input.\n(submittted 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://xplor-apollo.herokuapp.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": "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": "tools"
+              "name": "multi"
             },
             {
-              "name": "trashcan"
-            },
+              "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-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": "triangle-down"
+              "name": "circle"
             },
             {
-              "name": "triangle-left"
+              "name": "rectangle"
             },
             {
-              "name": "triangle-right"
-            },
+              "name": "square"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The predefined size of the skeleton.",
+          "values": [
             {
-              "name": "triangle-up"
+              "name": "body"
             },
             {
-              "name": "trophy"
+              "name": "custom"
             },
             {
-              "name": "unlock"
+              "name": "display"
             },
             {
-              "name": "upload"
+              "name": "title-1"
             },
             {
-              "name": "video-camera"
+              "name": "title-2"
             },
             {
-              "name": "x"
+              "name": "title-3"
             },
             {
-              "name": "x-circle"
+              "name": "title-4"
             },
             {
-              "name": "x-circle-fill"
-            },
+              "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://xplor-apollo.herokuapp.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": "zoom-in"
+              "name": "default"
             },
             {
-              "name": "zoom-out"
+              "name": "warning"
             }
           ]
+        }
+      ]
+    },
+    {
+      "name": "xpl-tab",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "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": ""
+      },
+      "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",
@@ -4209,7 +1739,7 @@
       "name": "xpl-tabs",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "Tabs organize content across different screens, data sets, and other interactions."
       },
       "attributes": [
         {
@@ -4226,7 +1756,7 @@
       "name": "xpl-tag",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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, draggable, used in dropdowns, multi-select, search bars, etc.."
       },
       "attributes": []
     },
@@ -4234,7 +1764,7 @@
       "name": "xpl-toast",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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://xplor-apollo.herokuapp.com/?path=/story/components-modal--modal) instead."
       },
       "attributes": [
         {
@@ -4274,7 +1804,7 @@
       "name": "xpl-toggle",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "A Toggle is a type of form control that is used to switch between enabled and disabled states of an element."
       },
       "attributes": [
         {
@@ -4332,7 +1862,7 @@
       "name": "xpl-tooltip",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "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": [
         {