@govtechsg/sgds-web-component 3.16.1-rc.2 → 3.17.0

package/custom-elements.json

@@ -116,16 +116,24 @@
           "description": "",
           "name": "SgdsAccordionItem",
           "slots": [
+            {
+              "description": "An icon placed before the header text, typically used to provide visual context for the accordion item.",
+              "name": "icon"
+            },
             {
               "description": "The accordion-item button header slot.",
               "name": "header"
             },
+            {
+              "description": "A badge placed after the header text, aligned to the right via auto left margin.",
+              "name": "badge"
+            },
             {
               "description": "The accordion-item content slot.",
               "name": "content"
             },
             {
-              "description": "The caret icon of accordion-item.",
+              "description": "The caret icon of accordion-item. Defaults to a chevron-down icon.",
               "name": "caret"
             }
           ],
@@ -380,7 +388,7 @@
               "kind": "field",
               "name": "density",
               "type": {
-                "text": "\"default\" | \"compact\""
+                "text": "\"default\" | \"compact\" | \"spacious\""
               },
               "default": "\"default\"",
               "description": "The density of accordion",
@@ -1180,152 +1188,448 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/Button/sgds-button.ts",
+      "path": "src/components/Breadcrumb/sgds-breadcrumb-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SgdsButton",
+          "name": "SgdsBreadcrumbItem",
           "slots": [
             {
-              "description": "The button's label.",
+              "description": "The link of the item. Pass in anchor tags into this slot",
               "name": "default"
-            },
-            {
-              "description": "The slot for icon to the left of the button text",
-              "name": "leftIcon"
-            },
-            {
-              "description": "The slot for icon to the right of the button text",
-              "name": "rightIcon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "dependencies",
               "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
+                "text": "Record<string, typeof SgdsElement>"
               },
-              "default": "\"button\"",
-              "description": "The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server",
-              "attribute": "type",
-              "reflects": true
+              "static": true,
+              "default": "{\n    \"sgds-link\": SgdsLink\n  }"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
-              "attribute": "form",
+              "default": "false",
+              "description": "Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item",
+              "attribute": "active",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "formAction",
-              "type": {
-                "text": "string"
-              },
-              "description": "Used to override the form owner's `action` attribute.",
-              "attribute": "formaction",
-              "reflects": true
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit<T>"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "type": {},
+              "inheritedFrom": {
+                "name": "SgdsElement",
+                "module": "src/base/sgds-element.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "formMethod",
-              "type": {
-                "text": "\"post\" | \"get\""
-              },
-              "description": "Used to override the form owner's `method` attribute.",
-              "attribute": "formmethod",
-              "reflects": true
-            },
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "elementConstructor",
+                  "default": "this"
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ElementDefinitionOptions"
+                  }
+                }
+              ],
+              "type": {},
+              "inheritedFrom": {
+                "name": "SgdsElement",
+                "module": "src/base/sgds-element.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "formNoValidate",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "attribute": "formnovalidate",
-              "reflects": true
-            },
+              "default": "false",
+              "description": "Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item",
+              "fieldName": "active"
+            }
+          ],
+          "superclass": {
+            "name": "SgdsElement",
+            "module": "/src/base/sgds-element"
+          },
+          "summary": "Breadcrumb Item are navigational links used in Breadcrumb component",
+          "tagName": "sgds-breadcrumb-item",
+          "customElement": true,
+          "modulePath": "src/components/Breadcrumb/sgds-breadcrumb-item.ts",
+          "cssProperties": [],
+          "cssParts": [],
+          "cssStates": [],
+          "events": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SgdsBreadcrumbItem",
+          "declaration": {
+            "name": "SgdsBreadcrumbItem",
+            "module": "src/components/Breadcrumb/sgds-breadcrumb-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SgdsBreadcrumbItem",
+            "module": "src/components/Breadcrumb/sgds-breadcrumb-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/Breadcrumb/sgds-breadcrumb.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SgdsBreadcrumb",
+          "slots": [
             {
-              "kind": "field",
-              "name": "formTarget",
-              "type": {
-                "text": "| \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string"
-              },
-              "description": "Used to override the form owner's `target` attribute.",
-              "attribute": "formtarget",
-              "reflects": true
-            },
+              "description": "The slot to pass in custom elements of `SgdsBreadcrumbItems`.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "fullWidth",
+              "name": "dependencies",
               "type": {
-                "text": "boolean"
+                "text": "object"
               },
-              "default": "false",
-              "description": "When set, the button will be in full width.",
-              "attribute": "fullWidth",
-              "reflects": true
+              "static": true,
+              "default": "{\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  }"
             },
             {
               "kind": "field",
-              "name": "hasLeftIconSlot",
+              "name": "ariaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
-              "attribute": "hasLeftIconSlot"
+              "default": "\"breadcrumb\"",
+              "description": "The aria-label of nav element within breadcrumb component.",
+              "attribute": "ariaLabel"
             },
             {
-              "kind": "field",
-              "name": "hasRightIconSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
-              "attribute": "hasRightIconSlot"
+              "kind": "method",
+              "name": "_replaceExcessItemsWithDropdown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "SgdsBreadcrumbItem[]"
+                  }
+                }
+              ],
+              "description": "creates `<sgds-breadcrumb-item>\n           <sgds-overflow-menu>\n             <sgds-dropdown-item></sgds-dropdown-item>\n              ...\n           </sgds-overflow-menu>\n         <sgds-breadcrumb-item>`",
+              "type": {}
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
+              "kind": "method",
+              "name": "_handleSlotChange",
               "privacy": "private",
-              "default": "new HasSlotController(this, \"leftIcon\", \"rightIcon\")",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "type": {}
             },
             {
               "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected",
+              "name": "emit",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "name",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit<T>"
                   }
                 }
               ],
+              "description": "Emits a custom event with more convenient defaults.",
               "type": {},
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "SgdsElement",
+                "module": "src/base/sgds-element.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "elementConstructor",
+                  "default": "this"
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ElementDefinitionOptions"
+                  }
+                }
+              ],
+              "type": {},
+              "inheritedFrom": {
+                "name": "SgdsElement",
+                "module": "src/base/sgds-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"breadcrumb\"",
+              "description": "The aria-label of nav element within breadcrumb component.",
+              "fieldName": "ariaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "SgdsElement",
+            "module": "/src/base/sgds-element"
+          },
+          "summary": "Breadcrumbs help users to navigate and understand where they are on the current website or service.",
+          "tagName": "sgds-breadcrumb",
+          "customElement": true,
+          "modulePath": "src/components/Breadcrumb/sgds-breadcrumb.ts",
+          "cssProperties": [],
+          "cssParts": [],
+          "cssStates": [],
+          "events": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SgdsBreadcrumb",
+          "declaration": {
+            "name": "SgdsBreadcrumb",
+            "module": "src/components/Breadcrumb/sgds-breadcrumb.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SgdsBreadcrumb",
+            "module": "src/components/Breadcrumb/sgds-breadcrumb.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/Button/sgds-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SgdsButton",
+          "slots": [
+            {
+              "description": "The button's label.",
+              "name": "default"
+            },
+            {
+              "description": "The slot for icon to the left of the button text",
+              "name": "leftIcon"
+            },
+            {
+              "description": "The slot for icon to the right of the button text",
+              "name": "rightIcon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "default": "\"button\"",
+              "description": "The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "formAction",
+              "type": {
+                "text": "string"
+              },
+              "description": "Used to override the form owner's `action` attribute.",
+              "attribute": "formaction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "formMethod",
+              "type": {
+                "text": "\"post\" | \"get\""
+              },
+              "description": "Used to override the form owner's `method` attribute.",
+              "attribute": "formmethod",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "formNoValidate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "attribute": "formnovalidate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "formTarget",
+              "type": {
+                "text": "| \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string"
+              },
+              "description": "Used to override the form owner's `target` attribute.",
+              "attribute": "formtarget",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the button will be in full width.",
+              "attribute": "fullWidth",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hasLeftIconSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
+              "attribute": "hasLeftIconSlot"
+            },
+            {
+              "kind": "field",
+              "name": "hasRightIconSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
+              "attribute": "hasRightIconSlot"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "default": "new HasSlotController(this, \"leftIcon\", \"rightIcon\")",
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_clickHandler",
+              "privacy": "private",
+              "type": {}
+            },
             {
               "kind": "field",
-              "name": "_clickHandler",
-              "privacy": "private",
-              "type": {}
-            },
-            {
-              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "\"primary\" | \"outline\" | \"ghost\" | \"danger\""
@@ -1733,463 +2037,167 @@
             {
               "name": "hasRightIconSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
-              "fieldName": "hasRightIconSlot"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ButtonVariant"
-              },
-              "default": "\"primary\"",
-              "description": "Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "tone",
-              "type": {
-                "text": "ButtonTone"
-              },
-              "default": "\"brand\"",
-              "description": "Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral`",
-              "fieldName": "tone",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
-              },
-              "default": "\"md\"",
-              "description": "Specifies a small, medium or large button, the size is medium by default.",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Manually set the visual state of the button to `:active`",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The disabled state of the button",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "fieldName": "href",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
-              },
-              "default": "\"_self\"",
-              "description": "Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute",
-              "fieldName": "target",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "download",
-              "type": {
-                "text": "string"
-              },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "fieldName": "download",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "ariaLabel",
-              "type": {
-                "text": "string"
-              },
-              "description": "The aria-label attribute to passed to button element when necessary",
-              "fieldName": "ariaLabel",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When true, shows a loading spinner",
-              "fieldName": "loading",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "ButtonElement",
-            "module": "/src/base/button-element"
-          },
-          "summary": "Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.",
-          "tagName": "sgds-button",
-          "customElement": true,
-          "modulePath": "src/components/Button/sgds-button.ts",
-          "cssProperties": [],
-          "cssParts": [],
-          "cssStates": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SgdsButton",
-          "declaration": {
-            "name": "SgdsButton",
-            "module": "src/components/Button/sgds-button.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SgdsButton",
-            "module": "src/components/Button/sgds-button.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/Breadcrumb/sgds-breadcrumb-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SgdsBreadcrumbItem",
-          "slots": [
-            {
-              "description": "The link of the item. Pass in anchor tags into this slot",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "Record<string, typeof SgdsElement>"
-              },
-              "static": true,
-              "default": "{\n    \"sgds-link\": SgdsLink\n  }"
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit<T>"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "type": {},
-              "inheritedFrom": {
-                "name": "SgdsElement",
-                "module": "src/base/sgds-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "define",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "elementConstructor",
-                  "default": "this"
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ElementDefinitionOptions"
-                  }
-                }
-              ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "SgdsElement",
-                "module": "src/base/sgds-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item",
-              "fieldName": "active"
-            }
-          ],
-          "superclass": {
-            "name": "SgdsElement",
-            "module": "/src/base/sgds-element"
-          },
-          "summary": "Breadcrumb Item are navigational links used in Breadcrumb component",
-          "tagName": "sgds-breadcrumb-item",
-          "customElement": true,
-          "modulePath": "src/components/Breadcrumb/sgds-breadcrumb-item.ts",
-          "cssProperties": [],
-          "cssParts": [],
-          "cssStates": [],
-          "events": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SgdsBreadcrumbItem",
-          "declaration": {
-            "name": "SgdsBreadcrumbItem",
-            "module": "src/components/Breadcrumb/sgds-breadcrumb-item.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SgdsBreadcrumbItem",
-            "module": "src/components/Breadcrumb/sgds-breadcrumb-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/Breadcrumb/sgds-breadcrumb.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SgdsBreadcrumb",
-          "slots": [
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
+              "fieldName": "hasRightIconSlot"
+            },
             {
-              "description": "The slot to pass in custom elements of `SgdsBreadcrumbItems`.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "default": "\"primary\"",
+              "description": "Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
+              "name": "tone",
               "type": {
-                "text": "object"
+                "text": "ButtonTone"
               },
-              "static": true,
-              "default": "{\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  }"
+              "default": "\"brand\"",
+              "description": "Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral`",
+              "fieldName": "tone",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
               },
-              "default": "\"breadcrumb\"",
-              "description": "The aria-label of nav element within breadcrumb component.",
-              "attribute": "ariaLabel"
+              "default": "\"md\"",
+              "description": "Specifies a small, medium or large button, the size is medium by default.",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "_replaceExcessItemsWithDropdown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "items",
-                  "type": {
-                    "text": "SgdsBreadcrumbItem[]"
-                  }
-                }
-              ],
-              "description": "creates `<sgds-breadcrumb-item>\n           <sgds-overflow-menu>\n             <sgds-dropdown-item></sgds-dropdown-item>\n              ...\n           </sgds-overflow-menu>\n         <sgds-breadcrumb-item>`",
-              "type": {}
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Manually set the visual state of the button to `:active`",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "_handleSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "type": {}
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The disabled state of the button",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit<T>"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "type": {},
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "fieldName": "href",
               "inheritedFrom": {
-                "name": "SgdsElement",
-                "module": "src/base/sgds-element.ts"
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "define",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "elementConstructor",
-                  "default": "this"
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ElementDefinitionOptions"
-                  }
-                }
-              ],
-              "type": {},
+              "name": "target",
+              "type": {
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              },
+              "default": "\"_self\"",
+              "description": "Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute",
+              "fieldName": "target",
               "inheritedFrom": {
-                "name": "SgdsElement",
-                "module": "src/base/sgds-element.ts"
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "fieldName": "download",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
             {
               "name": "ariaLabel",
               "type": {
                 "text": "string"
               },
-              "default": "\"breadcrumb\"",
-              "description": "The aria-label of nav element within breadcrumb component.",
-              "fieldName": "ariaLabel"
+              "description": "The aria-label attribute to passed to button element when necessary",
+              "fieldName": "ariaLabel",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, shows a loading spinner",
+              "fieldName": "loading",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "SgdsElement",
-            "module": "/src/base/sgds-element"
+            "name": "ButtonElement",
+            "module": "/src/base/button-element"
           },
-          "summary": "Breadcrumbs help users to navigate and understand where they are on the current website or service.",
-          "tagName": "sgds-breadcrumb",
+          "summary": "Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.",
+          "tagName": "sgds-button",
           "customElement": true,
-          "modulePath": "src/components/Breadcrumb/sgds-breadcrumb.ts",
+          "modulePath": "src/components/Button/sgds-button.ts",
           "cssProperties": [],
           "cssParts": [],
-          "cssStates": [],
-          "events": []
+          "cssStates": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SgdsBreadcrumb",
+          "name": "SgdsButton",
           "declaration": {
-            "name": "SgdsBreadcrumb",
-            "module": "src/components/Breadcrumb/sgds-breadcrumb.ts"
+            "name": "SgdsButton",
+            "module": "src/components/Button/sgds-button.ts"
           }
         },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SgdsBreadcrumb",
-            "module": "src/components/Breadcrumb/sgds-breadcrumb.ts"
+            "name": "SgdsButton",
+            "module": "src/components/Button/sgds-button.ts"
           }
         }
       ]
@@ -14716,6 +14724,17 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the selected radio input in the group when it becomes checked.",
+              "attribute": "autofocus",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "_handleValueChange",
@@ -15078,6 +15097,15 @@
               "description": "Makes the input as a required field.",
               "fieldName": "required"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the selected radio input in the group when it becomes checked.",
+              "fieldName": "autofocus"
+            },
             {
               "name": "label",
               "type": {
@@ -15246,6 +15274,16 @@
               "attribute": "invalid",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the radio input when it becomes checked.",
+              "attribute": "autofocus"
+            },
             {
               "kind": "field",
               "name": "input",
@@ -15404,6 +15442,15 @@
               "default": "false",
               "description": "Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements",
               "fieldName": "invalid"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the radio input when it becomes checked.",
+              "fieldName": "autofocus"
             }
           ],
           "superclass": {
@@ -26259,7 +26306,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.16.1-rc.2",
+    "version": "3.17.0",
     "author": "GovTechSG",
     "license": "MIT"
   }