@govtechsg/sgds-web-component 3.19.0-rc.0 → 3.19.0-rc.1

package/custom-elements.json

@@ -919,65 +919,86 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/Badge/sgds-badge.ts",
+      "path": "src/components/Button/sgds-button.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SgdsBadge",
+          "name": "SgdsButton",
           "slots": [
             {
-              "description": "slot for badge",
+              "description": "The button's label.",
               "name": "default"
             },
             {
-              "description": "The slot for icon to the left of the badge text",
-              "name": "icon"
+              "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": "show",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "default": "false",
-              "description": "Controls the appearance of the dismissible badge. This prop only applies when dismissible is true",
-              "attribute": "show",
+              "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": "variant",
+              "name": "form",
               "type": {
-                "text": "\"primary\" | \"accent\" | \"success\" | \"danger\" | \"warning\" | \"cyan\" | \"purple\" | \"neutral\" | \"white\" | \"info\""
+                "text": "string"
               },
-              "default": "\"primary\"",
-              "description": "One or more badge variant combinations.\nVariants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n\n(@deprecated) The `info` variant is deprecated. Use `primary` instead.",
-              "attribute": "variant",
+              "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": "outlined",
+              "name": "formAction",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Manually set the outlined state to false",
-              "attribute": "outlined",
+              "description": "Used to override the form owner's `action` attribute.",
+              "attribute": "formaction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "dismissible",
+              "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"
               },
-              "default": "false",
-              "description": "Manually set the dismissible state of the button to `false`",
-              "attribute": "dismissible",
+              "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
             },
             {
@@ -987,187 +1008,611 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Manually enable full width",
+              "description": "When set, the button will be in full width.",
               "attribute": "fullWidth",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "truncated",
+              "name": "hasLeftIconSlot",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
+              "attribute": "hasLeftIconSlot"
             },
             {
               "kind": "field",
-              "name": "text",
+              "name": "hasRightIconSlot",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "\"\""
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "privacy": "public",
-              "description": "Closes the badge",
-              "type": {}
-            },
-            {
-              "kind": "method",
-              "name": "_handleLabelSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "type": {}
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
+              "attribute": "hasRightIconSlot"
             },
             {
-              "kind": "method",
-              "name": "_renderBadge",
+              "kind": "field",
+              "name": "hasSlotController",
               "privacy": "private",
+              "default": "new HasSlotController(this, \"leftIcon\", \"rightIcon\")",
               "type": {}
             },
             {
               "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,
+              "name": "_handleClick",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "elementConstructor",
-                  "default": "this"
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
+                  "name": "event",
                   "type": {
-                    "text": "ElementDefinitionOptions"
+                    "text": "MouseEvent"
                   }
                 }
               ],
               "type": {},
               "inheritedFrom": {
-                "name": "SgdsElement",
-                "module": "src/base/sgds-element.ts"
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the badge appears.",
-              "name": "sgds-show",
-              "reactName": "onSgdsShow"
             },
             {
-              "description": "Emitted when the badge is starting to close but has not closed.",
-              "name": "sgds-hide",
-              "reactName": "onSgdsHide"
-            },
-            {
-              "description": "Emitted after the badge has appeared",
-              "name": "sgds-after-show",
-              "reactName": "onSgdsAfterShow"
+              "kind": "field",
+              "name": "_clickHandler",
+              "privacy": "private",
+              "type": {}
             },
             {
-              "description": "Emitted after the badge has closed",
-              "name": "sgds-after-hide",
-              "reactName": "onSgdsAfterHide"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "show",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"primary\" | \"outline\" | \"ghost\" | \"danger\""
               },
-              "default": "false",
-              "description": "Controls the appearance of the dismissible badge. This prop only applies when dismissible is true",
-              "fieldName": "show"
+              "default": "\"primary\"",
+              "description": "Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "tone",
               "type": {
-                "text": "BadgeVariant"
+                "text": "\"brand\" | \"danger\" | \"fixed-light\" | \"neutral\""
               },
-              "default": "\"primary\"",
-              "description": "One or more badge variant combinations.\nVariants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n\n(@deprecated) The `info` variant is deprecated. Use `primary` instead.",
-              "fieldName": "variant"
+              "default": "\"brand\"",
+              "description": "Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral`",
+              "attribute": "tone",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "name": "outlined",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
               },
-              "default": "false",
-              "description": "Manually set the outlined state to false",
-              "fieldName": "outlined"
+              "default": "\"md\"",
+              "description": "Specifies a small, medium or large button, the size is medium by default.",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "name": "dismissible",
+              "kind": "field",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Manually set the dismissible state of the button to `false`",
-              "fieldName": "dismissible"
+              "description": "Manually set the visual state of the button to `:active`",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
             },
             {
-              "name": "fullWidth",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Manually enable full width",
-              "fieldName": "fullWidth"
-            }
-          ],
-          "superclass": {
-            "name": "SgdsElement",
-            "module": "/src/base/sgds-element"
+              "description": "The disabled state of the button",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "attribute": "href",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "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",
+              "attribute": "target",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "attribute": "download",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "The aria-label attribute to passed to button element when necessary",
+              "attribute": "ariaLabel",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, shows a loading spinner",
+              "attribute": "loading",
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the button.",
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "privacy": "public",
+              "description": "Simulates a click on the button.",
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "privacy": "public",
+              "description": "Removes focus from the button.",
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
+              "privacy": "protected",
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleFocus",
+              "privacy": "protected",
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleKeydown",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_assignSpinnerSize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "buttonSize",
+                  "type": {
+                    "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+                  }
+                }
+              ],
+              "type": {},
+              "inheritedFrom": {
+                "name": "ButtonElement",
+                "module": "src/base/button-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_assignSpinnerTone",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "SpinnerTone"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "buttonTone",
+                  "type": {
+                    "text": "ButtonTone"
+                  }
+                },
+                {
+                  "name": "buttonVariant",
+                  "type": {
+                    "text": "ButtonVariant"
+                  }
+                }
+              ],
+              "type": {},
+              "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": {},
+              "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"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the button is blurred.",
+              "name": "sgds-blur",
+              "reactName": "onSgdsBlur"
+            },
+            {
+              "description": "Emitted when the button is focused.",
+              "name": "sgds-focus",
+              "reactName": "onSgdsFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "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",
+              "fieldName": "type"
+            },
+            {
+              "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.",
+              "fieldName": "form"
+            },
+            {
+              "name": "formaction",
+              "type": {
+                "text": "string"
+              },
+              "description": "Used to override the form owner's `action` attribute.",
+              "fieldName": "formAction"
+            },
+            {
+              "name": "formmethod",
+              "type": {
+                "text": "\"post\" | \"get\""
+              },
+              "description": "Used to override the form owner's `method` attribute.",
+              "fieldName": "formMethod"
+            },
+            {
+              "name": "formnovalidate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "fieldName": "formNoValidate"
+            },
+            {
+              "name": "formtarget",
+              "type": {
+                "text": "| \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string"
+              },
+              "description": "Used to override the form owner's `target` attribute.",
+              "fieldName": "formTarget"
+            },
+            {
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, the button will be in full width.",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "hasLeftIconSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
+              "fieldName": "hasLeftIconSlot"
+            },
+            {
+              "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": "Badges can be used to highlight important bits of information such as labels, notifications & status.\nWhen the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.",
-          "tagName": "sgds-badge",
+          "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/Badge/sgds-badge.ts",
+          "modulePath": "src/components/Button/sgds-button.ts",
           "cssProperties": [],
           "cssParts": [],
           "cssStates": []
@@ -1176,18 +1621,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SgdsBadge",
+          "name": "SgdsButton",
           "declaration": {
-            "name": "SgdsBadge",
-            "module": "src/components/Badge/sgds-badge.ts"
+            "name": "SgdsButton",
+            "module": "src/components/Button/sgds-button.ts"
           }
         },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SgdsBadge",
-            "module": "src/components/Badge/sgds-badge.ts"
+            "name": "SgdsButton",
+            "module": "src/components/Button/sgds-button.ts"
           }
         }
       ]
@@ -1490,419 +1935,288 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/Button/sgds-button.ts",
+      "path": "src/components/Card/sgds-card.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
-            },
+          "name": "SgdsCard",
+          "slots": [
             {
-              "kind": "field",
-              "name": "formAction",
-              "type": {
-                "text": "string"
-              },
-              "description": "Used to override the form owner's `action` attribute.",
-              "attribute": "formaction",
-              "reflects": true
+              "description": "The content area of the card, placed directly under the title. Accepts any HTML or custom elements.",
+              "name": "default"
             },
             {
-              "kind": "field",
-              "name": "formMethod",
-              "type": {
-                "text": "\"post\" | \"get\""
-              },
-              "description": "Used to override the form owner's `method` attribute.",
-              "attribute": "formmethod",
-              "reflects": true
+              "description": "Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.",
+              "name": "menu"
             },
             {
-              "kind": "field",
-              "name": "formNoValidate",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "attribute": "formnovalidate",
-              "reflects": true
+              "description": "Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.",
+              "name": "upper"
             },
             {
-              "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": "Accepts an image or svg element of the card. Only a single element is allowed to be passed in.",
+              "name": "image"
             },
             {
-              "kind": "field",
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When set, the button will be in full width.",
-              "attribute": "fullWidth",
-              "reflects": true
+              "description": "Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.",
+              "name": "icon"
             },
             {
-              "kind": "field",
-              "name": "hasLeftIconSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
-              "attribute": "hasLeftIconSlot"
+              "description": "The subtitle of the card",
+              "name": "subtitle"
             },
             {
-              "kind": "field",
-              "name": "hasRightIconSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `rightIcon` slot.",
-              "attribute": "hasRightIconSlot"
+              "description": "The title of the card",
+              "name": "title"
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "default": "new HasSlotController(this, \"leftIcon\", \"rightIcon\")",
-              "type": {}
+              "description": "The paragrapher text of the card",
+              "name": "description"
             },
             {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "description": "Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.",
+              "name": "lower"
             },
             {
-              "kind": "field",
-              "name": "_clickHandler",
-              "privacy": "private",
-              "type": {}
+              "description": "Footer area of the card. Accepts links, actions, or any custom content.",
+              "name": "footer"
             },
+            {
+              "description": "(@deprecated) Deprecated since 3.3.2 in favour of `footer` slot. Legacy slot for anchor elements. Use `footer` instead.",
+              "name": "link"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "footerNode",
               "type": {
-                "text": "\"primary\" | \"outline\" | \"ghost\" | \"danger\""
+                "text": "HTMLElement[]"
               },
-              "default": "\"primary\"",
-              "description": "Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "tone",
+              "name": "linkNode",
               "type": {
-                "text": "\"brand\" | \"danger\" | \"fixed-light\" | \"neutral\""
+                "text": "HTMLAnchorElement[] | SgdsLink[]"
               },
-              "default": "\"brand\"",
-              "description": "Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral`",
-              "attribute": "tone",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "imagePosition",
               "type": {
-                "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+                "text": "CardImagePosition"
               },
-              "default": "\"md\"",
-              "description": "Specifies a small, medium or large button, the size is medium by default.",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "default": "\"before\"",
+              "description": "Sets the image position of the card. Available options: `before`, `after`",
+              "attribute": "imagePosition",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "imageAdjustment",
               "type": {
-                "text": "boolean"
+                "text": "CardImageAdjustment"
               },
-              "default": "false",
-              "description": "Manually set the visual state of the button to `:active`",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "default": "\"default\"",
+              "description": "Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio`",
+              "attribute": "imageAdjustment",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hasImageSlot",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The disabled state of the button",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "description": "Used only for SSR to indicate the presence of the `image` slot.",
+              "attribute": "hasImageSlot"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "hasIconSlot",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "attribute": "href",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `icon` slot.",
+              "attribute": "hasIconSlot"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "hasUpperSlot",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                "text": "boolean"
               },
-              "default": "\"_self\"",
-              "description": "Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute",
-              "attribute": "target",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `upper` slot.",
+              "attribute": "hasUpperSlot"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "linkSlotItems",
               "type": {
-                "text": "string"
+                "text": "HTMLAnchorElement | null"
               },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "attribute": "download",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "footerSlotItems",
               "type": {
-                "text": "string"
+                "text": "HTMLAnchorElement | null"
               },
-              "description": "The aria-label attribute to passed to button element when necessary",
-              "attribute": "ariaLabel",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When true, shows a loading spinner",
-              "attribute": "loading",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "name": "hasSlotController",
+              "privacy": "private",
+              "default": "new HasSlotController(this, \"image\", \"icon\", \"upper\")",
+              "type": {}
             },
             {
               "kind": "method",
-              "name": "focus",
-              "privacy": "public",
+              "name": "handleImgSlotChange",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "Event"
                   }
                 }
-              ],
-              "description": "Sets focus on the button.",
-              "type": {},
+              ],
+              "type": {}
+            },
+            {
+              "kind": "field",
+              "name": "stretchedLink",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Extends the link passed in either `footer` or `link`(deprecated) slot.",
+              "attribute": "stretchedLink",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "privacy": "public",
-              "description": "Simulates a click on the button.",
-              "type": {},
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the card",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "privacy": "public",
-              "description": "Removes focus from the button.",
-              "type": {},
+              "kind": "field",
+              "name": "hideBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, hides the default border of the card.",
+              "attribute": "hideBorder",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "_handleBlur",
-              "privacy": "protected",
-              "type": {},
+              "kind": "field",
+              "name": "tinted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, applies a tinted background color to the card.",
+              "attribute": "tinted",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "_handleFocus",
-              "privacy": "protected",
-              "type": {},
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "CardOrientation"
+              },
+              "default": "\"vertical\"",
+              "description": "Sets the orientation of the card. Available options: `vertical`, `horizontal`",
+              "attribute": "orientation",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
               "kind": "method",
-              "name": "_handleKeydown",
-              "privacy": "protected",
+              "name": "handleTitleSlotChange",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "e",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "Event"
                   }
                 }
               ],
               "type": {},
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
               "kind": "method",
-              "name": "_assignSpinnerSize",
+              "name": "_forwardAnchorAttributes",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "buttonSize",
+                  "name": "anchor",
                   "type": {
-                    "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+                    "text": "HTMLAnchorElement | null"
                   }
                 }
               ],
               "type": {},
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
               "kind": "method",
-              "name": "_assignSpinnerTone",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "SpinnerTone"
-                }
-              },
+              "name": "warnLinkSlotMisused",
               "parameters": [
                 {
-                  "name": "buttonTone",
-                  "type": {
-                    "text": "ButtonTone"
-                  }
-                },
-                {
-                  "name": "buttonVariant",
+                  "name": "e",
                   "type": {
-                    "text": "ButtonVariant"
+                    "text": "Event"
                   }
                 }
               ],
               "type": {},
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
@@ -1960,526 +2274,254 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "Emitted when the button is blurred.",
-              "name": "sgds-blur",
-              "reactName": "onSgdsBlur"
-            },
-            {
-              "description": "Emitted when the button is focused.",
-              "name": "sgds-focus",
-              "reactName": "onSgdsFocus"
-            }
-          ],
           "attributes": [
             {
-              "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",
-              "fieldName": "type"
-            },
-            {
-              "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.",
-              "fieldName": "form"
-            },
-            {
-              "name": "formaction",
-              "type": {
-                "text": "string"
-              },
-              "description": "Used to override the form owner's `action` attribute.",
-              "fieldName": "formAction"
-            },
-            {
-              "name": "formmethod",
-              "type": {
-                "text": "\"post\" | \"get\""
-              },
-              "description": "Used to override the form owner's `method` attribute.",
-              "fieldName": "formMethod"
-            },
-            {
-              "name": "formnovalidate",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "fieldName": "formNoValidate"
-            },
-            {
-              "name": "formtarget",
-              "type": {
-                "text": "| \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string"
-              },
-              "description": "Used to override the form owner's `target` attribute.",
-              "fieldName": "formTarget"
-            },
-            {
-              "name": "fullWidth",
+              "name": "imagePosition",
               "type": {
-                "text": "boolean"
+                "text": "CardImagePosition"
               },
-              "default": "false",
-              "description": "When set, the button will be in full width.",
-              "fieldName": "fullWidth"
+              "default": "\"before\"",
+              "description": "Sets the image position of the card. Available options: `before`, `after`",
+              "fieldName": "imagePosition"
             },
             {
-              "name": "hasLeftIconSlot",
+              "name": "imageAdjustment",
               "type": {
-                "text": "boolean"
+                "text": "CardImageAdjustment"
               },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `leftIcon` slot.",
-              "fieldName": "hasLeftIconSlot"
+              "default": "\"default\"",
+              "description": "Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio`",
+              "fieldName": "imageAdjustment"
             },
             {
-              "name": "hasRightIconSlot",
+              "name": "hasImageSlot",
               "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"
-              }
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `image` slot.",
+              "fieldName": "hasImageSlot"
             },
             {
-              "name": "active",
+              "name": "hasIconSlot",
               "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"
-              }
+              "description": "Used only for SSR to indicate the presence of the `icon` slot.",
+              "fieldName": "hasIconSlot"
             },
             {
-              "name": "disabled",
+              "name": "hasUpperSlot",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The disabled state of the button",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
-              }
+              "description": "Used only for SSR to indicate the presence of the `upper` slot.",
+              "fieldName": "hasUpperSlot"
             },
             {
-              "name": "href",
+              "name": "stretchedLink",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "fieldName": "href",
+              "default": "false",
+              "description": "Extends the link passed in either `footer` or `link`(deprecated) slot.",
+              "fieldName": "stretchedLink",
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "name": "target",
+              "name": "disabled",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                "text": "boolean"
               },
-              "default": "\"_self\"",
-              "description": "Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute",
-              "fieldName": "target",
+              "default": "false",
+              "description": "Disables the card",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "name": "download",
+              "name": "hideBorder",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "fieldName": "download",
+              "default": "false",
+              "description": "When true, hides the default border of the card.",
+              "fieldName": "hideBorder",
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "name": "ariaLabel",
+              "name": "tinted",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The aria-label attribute to passed to button element when necessary",
-              "fieldName": "ariaLabel",
+              "default": "false",
+              "description": "When true, applies a tinted background color to the card.",
+              "fieldName": "tinted",
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             },
             {
-              "name": "loading",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "CardOrientation"
               },
-              "description": "When true, shows a loading spinner",
-              "fieldName": "loading",
+              "default": "\"vertical\"",
+              "description": "Sets the orientation of the card. Available options: `vertical`, `horizontal`",
+              "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "ButtonElement",
-                "module": "src/base/button-element.ts"
+                "name": "CardElement",
+                "module": "src/base/card-element.ts"
               }
             }
           ],
           "superclass": {
-            "name": "ButtonElement",
-            "module": "/src/base/button-element"
+            "name": "CardElement",
+            "module": "/src/base/card-element"
           },
-          "summary": "Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.",
-          "tagName": "sgds-button",
+          "summary": "Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.",
+          "tagName": "sgds-card",
           "customElement": true,
-          "modulePath": "src/components/Button/sgds-button.ts",
+          "modulePath": "src/components/Card/sgds-card.ts",
           "cssProperties": [],
           "cssParts": [],
-          "cssStates": []
+          "cssStates": [],
+          "events": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SgdsButton",
+          "name": "SgdsCard",
           "declaration": {
-            "name": "SgdsButton",
-            "module": "src/components/Button/sgds-button.ts"
+            "name": "SgdsCard",
+            "module": "src/components/Card/sgds-card.ts"
           }
         },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SgdsButton",
-            "module": "src/components/Button/sgds-button.ts"
+            "name": "SgdsCard",
+            "module": "src/components/Card/sgds-card.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/Card/sgds-card.ts",
+      "path": "src/components/Badge/sgds-badge.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SgdsCard",
+          "name": "SgdsBadge",
           "slots": [
             {
-              "description": "The content area of the card, placed directly under the title. Accepts any HTML or custom elements.",
+              "description": "slot for badge",
               "name": "default"
             },
             {
-              "description": "Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.",
-              "name": "menu"
-            },
-            {
-              "description": "Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.",
-              "name": "upper"
-            },
-            {
-              "description": "Accepts an image or svg element of the card. Only a single element is allowed to be passed in.",
-              "name": "image"
-            },
-            {
-              "description": "Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.",
+              "description": "The slot for icon to the left of the badge text",
               "name": "icon"
-            },
-            {
-              "description": "The subtitle of the card",
-              "name": "subtitle"
-            },
-            {
-              "description": "The title of the card",
-              "name": "title"
-            },
-            {
-              "description": "The paragrapher text of the card",
-              "name": "description"
-            },
-            {
-              "description": "Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.",
-              "name": "lower"
-            },
-            {
-              "description": "Footer area of the card. Accepts links, actions, or any custom content.",
-              "name": "footer"
-            },
-            {
-              "description": "(@deprecated) Deprecated since 3.3.2 in favour of `footer` slot. Legacy slot for anchor elements. Use `footer` instead.",
-              "name": "link"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "footerNode",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "linkNode",
-              "type": {
-                "text": "HTMLAnchorElement[] | SgdsLink[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "imagePosition",
-              "type": {
-                "text": "CardImagePosition"
-              },
-              "default": "\"before\"",
-              "description": "Sets the image position of the card. Available options: `before`, `after`",
-              "attribute": "imagePosition",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "imageAdjustment",
-              "type": {
-                "text": "CardImageAdjustment"
-              },
-              "default": "\"default\"",
-              "description": "Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio`",
-              "attribute": "imageAdjustment",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hasImageSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `image` slot.",
-              "attribute": "hasImageSlot"
-            },
-            {
-              "kind": "field",
-              "name": "hasIconSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `icon` slot.",
-              "attribute": "hasIconSlot"
-            },
-            {
-              "kind": "field",
-              "name": "hasUpperSlot",
+              "name": "show",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `upper` slot.",
-              "attribute": "hasUpperSlot"
-            },
-            {
-              "kind": "field",
-              "name": "linkSlotItems",
-              "type": {
-                "text": "HTMLAnchorElement | null"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlotItems",
-              "type": {
-                "text": "HTMLAnchorElement | null"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "default": "new HasSlotController(this, \"image\", \"icon\", \"upper\")",
-              "type": {}
-            },
-            {
-              "kind": "method",
-              "name": "handleImgSlotChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "type": {}
+              "description": "Controls the appearance of the dismissible badge. This prop only applies when dismissible is true",
+              "attribute": "show",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "stretchedLink",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"primary\" | \"accent\" | \"success\" | \"danger\" | \"warning\" | \"cyan\" | \"purple\" | \"neutral\" | \"white\" | \"info\""
               },
-              "default": "false",
-              "description": "Extends the link passed in either `footer` or `link`(deprecated) slot.",
-              "attribute": "stretchedLink",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "default": "\"primary\"",
+              "description": "One or more badge variant combinations.\nVariants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n\n(@deprecated) The `info` variant is deprecated. Use `primary` instead.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "outlined",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the card",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually set the outlined state to false",
+              "attribute": "outlined",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideBorder",
+              "name": "dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the default border of the card.",
-              "attribute": "hideBorder",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually set the dismissible state of the button to `false`",
+              "attribute": "dismissible",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tinted",
+              "name": "fullWidth",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, applies a tinted background color to the card.",
-              "attribute": "tinted",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually enable full width",
+              "attribute": "fullWidth",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "truncated",
               "type": {
-                "text": "CardOrientation"
+                "text": "boolean"
               },
-              "default": "\"vertical\"",
-              "description": "Sets the orientation of the card. Available options: `vertical`, `horizontal`",
-              "attribute": "orientation",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleTitleSlotChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "method",
-              "name": "_forwardAnchorAttributes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "anchor",
-                  "type": {
-                    "text": "HTMLAnchorElement | null"
-                  }
-                }
-              ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "name": "close",
+              "privacy": "public",
+              "description": "Closes the badge",
+              "type": {}
             },
             {
               "kind": "method",
-              "name": "warnLinkSlotMisused",
+              "name": "_handleLabelSlotChange",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "e",
@@ -2488,11 +2530,13 @@
                   }
                 }
               ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_renderBadge",
+              "privacy": "private",
+              "type": {}
             },
             {
               "kind": "method",
@@ -2549,147 +2593,103 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "imagePosition",
-              "type": {
-                "text": "CardImagePosition"
-              },
-              "default": "\"before\"",
-              "description": "Sets the image position of the card. Available options: `before`, `after`",
-              "fieldName": "imagePosition"
+              "description": "Emitted when the badge appears.",
+              "name": "sgds-show",
+              "reactName": "onSgdsShow"
             },
             {
-              "name": "imageAdjustment",
-              "type": {
-                "text": "CardImageAdjustment"
-              },
-              "default": "\"default\"",
-              "description": "Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio`",
-              "fieldName": "imageAdjustment"
+              "description": "Emitted when the badge is starting to close but has not closed.",
+              "name": "sgds-hide",
+              "reactName": "onSgdsHide"
             },
             {
-              "name": "hasImageSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `image` slot.",
-              "fieldName": "hasImageSlot"
+              "description": "Emitted after the badge has appeared",
+              "name": "sgds-after-show",
+              "reactName": "onSgdsAfterShow"
             },
             {
-              "name": "hasIconSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `icon` slot.",
-              "fieldName": "hasIconSlot"
-            },
+              "description": "Emitted after the badge has closed",
+              "name": "sgds-after-hide",
+              "reactName": "onSgdsAfterHide"
+            }
+          ],
+          "attributes": [
             {
-              "name": "hasUpperSlot",
+              "name": "show",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Used only for SSR to indicate the presence of the `upper` slot.",
-              "fieldName": "hasUpperSlot"
+              "description": "Controls the appearance of the dismissible badge. This prop only applies when dismissible is true",
+              "fieldName": "show"
             },
             {
-              "name": "stretchedLink",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "BadgeVariant"
               },
-              "default": "false",
-              "description": "Extends the link passed in either `footer` or `link`(deprecated) slot.",
-              "fieldName": "stretchedLink",
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "default": "\"primary\"",
+              "description": "One or more badge variant combinations.\nVariants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n\n(@deprecated) The `info` variant is deprecated. Use `primary` instead.",
+              "fieldName": "variant"
             },
             {
-              "name": "disabled",
+              "name": "outlined",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the card",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually set the outlined state to false",
+              "fieldName": "outlined"
             },
             {
-              "name": "hideBorder",
+              "name": "dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the default border of the card.",
-              "fieldName": "hideBorder",
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually set the dismissible state of the button to `false`",
+              "fieldName": "dismissible"
             },
             {
-              "name": "tinted",
+              "name": "fullWidth",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, applies a tinted background color to the card.",
-              "fieldName": "tinted",
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "CardOrientation"
-              },
-              "default": "\"vertical\"",
-              "description": "Sets the orientation of the card. Available options: `vertical`, `horizontal`",
-              "fieldName": "orientation",
-              "inheritedFrom": {
-                "name": "CardElement",
-                "module": "src/base/card-element.ts"
-              }
+              "description": "Manually enable full width",
+              "fieldName": "fullWidth"
             }
           ],
           "superclass": {
-            "name": "CardElement",
-            "module": "/src/base/card-element"
+            "name": "SgdsElement",
+            "module": "/src/base/sgds-element"
           },
-          "summary": "Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.",
-          "tagName": "sgds-card",
+          "summary": "Badges can be used to highlight important bits of information such as labels, notifications & status.\nWhen the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.",
+          "tagName": "sgds-badge",
           "customElement": true,
-          "modulePath": "src/components/Card/sgds-card.ts",
+          "modulePath": "src/components/Badge/sgds-badge.ts",
           "cssProperties": [],
           "cssParts": [],
-          "cssStates": [],
-          "events": []
+          "cssStates": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SgdsCard",
+          "name": "SgdsBadge",
           "declaration": {
-            "name": "SgdsCard",
-            "module": "src/components/Card/sgds-card.ts"
+            "name": "SgdsBadge",
+            "module": "src/components/Badge/sgds-badge.ts"
           }
         },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SgdsCard",
-            "module": "src/components/Card/sgds-card.ts"
+            "name": "SgdsBadge",
+            "module": "src/components/Badge/sgds-badge.ts"
           }
         }
       ]
@@ -26733,7 +26733,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.19.0-rc.0",
+    "version": "3.19.0-rc.1",
     "author": "GovTechSG",
     "license": "MIT"
   }