@govtechsg/sgds-web-component 3.21.2-rc.4 → 3.21.2-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.21.2-rc.4",
+  "version": "3.21.2-rc.5",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/index.cjs.js

@@ -8,9 +8,9 @@ var index$1 = require('./accordion/index.cjs.js');
 var index$2 = require('./alert-link/index.cjs.js');
 var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
-var index$5 = require('./button/index.cjs.js');
-var index$6 = require('./breadcrumb-item/index.cjs.js');
-var index$7 = require('./breadcrumb/index.cjs.js');
+var index$5 = require('./breadcrumb-item/index.cjs.js');
+var index$6 = require('./breadcrumb/index.cjs.js');
+var index$7 = require('./button/index.cjs.js');
 var index$8 = require('./card/index.cjs.js');
 var index$9 = require('./checkbox-group/index.cjs.js');
 var index$a = require('./checkbox/index.cjs.js');
@@ -84,9 +84,9 @@ exports.SgdsAccordion = index$1["default"];
 exports.SgdsAlertLink = index$2["default"];
 exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
-exports.SgdsButton = index$5["default"];
-exports.SgdsBreadcrumbItem = index$6["default"];
-exports.SgdsBreadcrumb = index$7["default"];
+exports.SgdsBreadcrumbItem = index$5["default"];
+exports.SgdsBreadcrumb = index$6["default"];
+exports.SgdsButton = index$7["default"];
 exports.SgdsCard = index$8["default"];
 exports.SgdsCheckboxGroup = index$9["default"];
 exports.SgdsCheckbox = index$a["default"];

package/react/index.d.ts

@@ -3,9 +3,9 @@ export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
-export { default as SgdsButton } from './button';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
+export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';

package/react/index.js

@@ -4,9 +4,9 @@ export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
-export { default as SgdsButton } from './button/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';

package/types/react.d.ts

@@ -15,9 +15,9 @@
  *   // ES import (tsconfig must include this file via `include` or `typeRoots`):
  *   import "@govtechsg/sgds-web-component/sgds-types";
  *
- * Custom event handlers use the lowercase kebab-case `onsgds-*` form —
- * React 19 maps these directly to native addEventListener calls:
- *   <sgds-input onsgds-change={handler} />
+ * Custom event handlers support both forms:
+ *   - Kebab-case (React 19 intrinsic elements): <sgds-input onsgds-change={handler} />
+ *   - CamelCase (@lit/react wrappers):          <SgdsInput onSgdsChange={handler} />
  */
 
 export {};
@@ -107,9 +107,13 @@ export interface SgdsAccordionItemProps extends SgdsBaseProps {
   /** The aria-label attribute forwarded to the accordion item button. */
   ariaLabel?: string;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── Accordion ─────────────────────────────────────────────────────────────
@@ -146,7 +150,9 @@ export interface SgdsAlertProps extends SgdsBaseProps {
   /** The title of the alert. Only text is allowed */
   title?: string;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
 }
 
 // ── Badge ─────────────────────────────────────────────────────────────
@@ -166,9 +172,27 @@ Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `
   /** Manually enable full width */
   fullWidth?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
+  /** 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 */
+  active?: boolean;
+}
+
+// ── Breadcrumb ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
 }
 
 // ── Button ─────────────────────────────────────────────────────────────
@@ -222,21 +246,9 @@ value of this attribute must be an id of a form in the same document or shadow r
   /** When true, shows a loading spinner */
   loading?: boolean;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
-}
-
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
-  /** 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 */
-  active?: boolean;
-}
-
-// ── Breadcrumb ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
+  onSgdsFocus?: SgdsEventHandler;
 }
 
 // ── Card ─────────────────────────────────────────────────────────────
@@ -291,6 +303,7 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
 }
 
 // ── Checkbox ─────────────────────────────────────────────────────────────
@@ -325,10 +338,15 @@ export interface SgdsCheckboxProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-check"?: SgdsEventHandler;
+  onSgdsCheck?: SgdsEventHandler;
   "onsgds-uncheck"?: SgdsEventHandler;
+  onSgdsUncheck?: SgdsEventHandler;
 }
 
 // ── CloseButton ─────────────────────────────────────────────────────────────
@@ -413,16 +431,27 @@ value: string;
   /** Makes the input readonly. */
   readonly?: boolean;
   "onsgds-select"?: SgdsEventHandler;
+  onSgdsSelect?: SgdsEventHandler;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-input"?: (event: CustomEvent<ISgdsComboBoxInputEventDetail>) => void;
+  onSgdsInput?: (event: CustomEvent<ISgdsComboBoxInputEventDetail>) => void;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
   "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── Datepicker ─────────────────────────────────────────────────────────────
@@ -480,12 +509,19 @@ range mode as array of string. eg.'["22/12/2023"]' for single &
   /** Makes the input readonly. */
   readonly?: boolean;
   "onsgds-change-date"?: SgdsEventHandler;
+  onSgdsChangeDate?: SgdsEventHandler;
   "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
   "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── DescriptionListGroup ─────────────────────────────────────────────────────────────
@@ -538,11 +574,17 @@ Accepts `small`, `medium`, or `large`. Defaults to `small`. */
 its parent element, set this attribute and add `position: relative` to the parent. */
   contained?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
   "onsgds-initial-focus"?: SgdsEventHandler;
+  onSgdsInitialFocus?: SgdsEventHandler;
   "onsgds-request-close"?: SgdsEventHandler;
+  onSgdsRequestClose?: SgdsEventHandler;
 }
 
 // ── DropdownItem ─────────────────────────────────────────────────────────────
@@ -573,10 +615,15 @@ export interface SgdsDropdownProps extends SgdsBaseProps {
   /** Makes the input readonly. */
   readonly?: boolean;
   "onsgds-select"?: SgdsEventHandler;
+  onSgdsSelect?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── FileUpload ─────────────────────────────────────────────────────────────
@@ -615,9 +662,13 @@ export interface SgdsFileUploadProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-files-selected"?: (event: CustomEvent<ISgdsFileUploadFilesSelectedEventDetail>) => void;
+  onSgdsFilesSelected?: (event: CustomEvent<ISgdsFileUploadFilesSelectedEventDetail>) => void;
   "onsgds-add-files"?: (event: CustomEvent<ISgdsFileUploadAddFilesEventDetail>) => void;
+  onSgdsAddFiles?: (event: CustomEvent<ISgdsFileUploadAddFilesEventDetail>) => void;
   "onsgds-remove-file"?: (event: CustomEvent<ISgdsFileUploadRemoveFileEventDetail>) => void;
+  onSgdsRemoveFile?: (event: CustomEvent<ISgdsFileUploadRemoveFileEventDetail>) => void;
   "onsgds-change"?: (event: CustomEvent<ISgdsFileUploadChangeEventDetail>) => void;
+  onSgdsChange?: (event: CustomEvent<ISgdsFileUploadChangeEventDetail>) => void;
 }
 
 // ── FooterItem ─────────────────────────────────────────────────────────────
@@ -695,7 +746,9 @@ export interface SgdsIconButtonProps extends SgdsBaseProps {
   /** When true, shows a loading spinner */
   loading?: boolean;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
 }
 
 // ── IconCard ─────────────────────────────────────────────────────────────
@@ -811,11 +864,17 @@ implied, allowing any numeric value. Only applies to number input types. */
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-input"?: SgdsEventHandler;
+  onSgdsInput?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
   "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
 }
 
 // ── Link ─────────────────────────────────────────────────────────────
@@ -863,9 +922,13 @@ export interface SgdsMainnavProps extends SgdsBaseProps {
   /** When true, removes max-width constraint to allow content to stretch full screen width */
   fluid?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── Masthead ─────────────────────────────────────────────────────────────
@@ -889,10 +952,15 @@ export interface SgdsModalProps extends SgdsBaseProps {
   /** Removes the close button in the modal header. */
   noCloseButton?: boolean;
   "onsgds-close"?: SgdsEventHandler;
+  onSgdsClose?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── OverflowMenu ─────────────────────────────────────────────────────────────
@@ -918,6 +986,7 @@ export interface SgdsPaginationProps extends SgdsBaseProps {
   /** Sets the size of all page items. */
   size?: "sm" | "md";
   "onsgds-page-change"?: (event: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => void;
+  onSgdsPageChange?: (event: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => void;
 }
 
 // ── ProgressBar ─────────────────────────────────────────────────────────────
@@ -976,7 +1045,9 @@ export interface SgdsQuantityToggleProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-input"?: SgdsEventHandler;
+  onSgdsInput?: SgdsEventHandler;
 }
 
 // ── RadioGroup ─────────────────────────────────────────────────────────────
@@ -1007,6 +1078,7 @@ export interface SgdsRadioGroupProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: (event: CustomEvent<ISgdsRadioGroupChangeEventDetail>) => void;
+  onSgdsChange?: (event: CustomEvent<ISgdsRadioGroupChangeEventDetail>) => void;
 }
 
 // ── Radio ─────────────────────────────────────────────────────────────
@@ -1023,7 +1095,9 @@ export interface SgdsRadioProps extends SgdsBaseProps {
   /** Automatically focuses the radio input when it becomes checked. */
   autofocus?: boolean;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
 }
 
 // ── SelectOption ─────────────────────────────────────────────────────────────
@@ -1083,13 +1157,21 @@ value: string;
   /** Makes the input readonly. */
   readonly?: boolean;
   "onsgds-select"?: SgdsEventHandler;
+  onSgdsSelect?: SgdsEventHandler;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── SidebarGroup ─────────────────────────────────────────────────────────────
@@ -1180,10 +1262,15 @@ export interface SgdsSidenavItemProps extends SgdsBaseProps {
   /** Disables the SgdsSidenavItem */
   disabled?: boolean;
   "onsgds-toggle"?: SgdsEventHandler;
+  onSgdsToggle?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── SidenavLink ─────────────────────────────────────────────────────────────
@@ -1268,11 +1355,17 @@ export interface SgdsStepperProps extends SgdsBaseProps {
   /** When true, the stepper's steps can only be clicked in a linear manner */
   linear?: boolean;
   "onsgds-next-step"?: SgdsEventHandler;
+  onSgdsNextStep?: SgdsEventHandler;
   "onsgds-previous-step"?: SgdsEventHandler;
+  onSgdsPreviousStep?: SgdsEventHandler;
   "onsgds-last-step"?: SgdsEventHandler;
+  onSgdsLastStep?: SgdsEventHandler;
   "onsgds-first-step"?: SgdsEventHandler;
+  onSgdsFirstStep?: SgdsEventHandler;
   "onsgds-arrived"?: SgdsEventHandler;
+  onSgdsArrived?: SgdsEventHandler;
   "onsgds-reset"?: SgdsEventHandler;
+  onSgdsReset?: SgdsEventHandler;
 }
 
 // ── SubnavItem ─────────────────────────────────────────────────────────────
@@ -1290,9 +1383,13 @@ export interface SgdsSubnavProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `actions` slot. */
   hasActionsSlot?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── Switch ─────────────────────────────────────────────────────────────
@@ -1311,6 +1408,7 @@ export interface SgdsSwitchProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `leftLabel` slot. */
   hasLeftLabelSlot?: boolean;
   "onsgds-change"?: (event: CustomEvent<ISgdsSwitchChangeEventDetail>) => void;
+  onSgdsChange?: (event: CustomEvent<ISgdsSwitchChangeEventDetail>) => void;
 }
 
 // ── SystemBannerItem ─────────────────────────────────────────────────────────────
@@ -1321,6 +1419,7 @@ export interface SgdsSystemBannerItemProps extends SgdsBaseProps {
   /** Disables the action link that appears when text content is clamped */
   noClampAction?: boolean;
   "onsgds-show-more"?: SgdsEventHandler;
+  onSgdsShowMore?: SgdsEventHandler;
 }
 
 // ── SystemBanner ─────────────────────────────────────────────────────────────
@@ -1335,7 +1434,9 @@ export interface SgdsSystemBannerProps extends SgdsBaseProps {
   /** When true, removes max-width constraint to allow content to stretch full screen width */
   fluid?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
 }
 
 // ── TabGroup ─────────────────────────────────────────────────────────────
@@ -1348,7 +1449,9 @@ export interface SgdsTabGroupProps extends SgdsBaseProps {
   /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */
   density?: "compact" | "default";
   "onsgds-tab-show"?: SgdsEventHandler;
+  onSgdsTabShow?: SgdsEventHandler;
   "onsgds-tab-hide"?: SgdsEventHandler;
+  onSgdsTabHide?: SgdsEventHandler;
 }
 
 // ── TabPanel ─────────────────────────────────────────────────────────────
@@ -1480,11 +1583,17 @@ export interface SgdsTextareaProps extends SgdsBaseProps {
   /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
+  onSgdsChange?: SgdsEventHandler;
   "onsgds-input"?: SgdsEventHandler;
+  onSgdsInput?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
+  onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  onSgdsBlur?: SgdsEventHandler;
   "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
   "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
 }
 
 // ── ThumbnailCard ─────────────────────────────────────────────────────────────
@@ -1530,9 +1639,13 @@ export interface SgdsToastProps extends SgdsBaseProps {
   /** Controls whether or not the Toast is dismissible */
   dismissible?: boolean;
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ── Tooltip ─────────────────────────────────────────────────────────────
@@ -1545,9 +1658,13 @@ export interface SgdsTooltipProps extends SgdsBaseProps {
   /** The method to invoke the tooltip. `hover focus` is the default value which allows tooltip to be triggered via mouse hover and keyboard focus. Add `tabindex=0` for HTMLelements that are not tabbable. */
   trigger?: "click" | "hover" | "focus" | "hover focus";
   "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
   "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
 }
 
 // ---------------------------------------------------------------------------
@@ -1562,9 +1679,9 @@ declare module "react" {
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
@@ -1645,9 +1762,9 @@ declare global {
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
     "sgds-badge": HTMLElement;
-    "sgds-button": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
+    "sgds-button": HTMLElement;
     "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;