@govtechsg/sgds-web-component 3.22.0 → 3.23.0-rc.0

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,46 +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;
-}
-
-// ── Card ─────────────────────────────────────────────────────────────
-
-export interface SgdsCardProps extends SgdsBaseProps {
-  /** Sets the image position of the card. Available options: `before`, `after` */
-  imagePosition?: CardImagePosition;
-  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
-  imageAdjustment?: CardImageAdjustment;
-  /** Used only for SSR to indicate the presence of the `image` slot. */
-  hasImageSlot?: boolean;
-  /** Used only for SSR to indicate the presence of the `icon` slot. */
-  hasIconSlot?: boolean;
-  /** Used only for SSR to indicate the presence of the `upper` slot. */
-  hasUpperSlot?: boolean;
-  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
-  stretchedLink?: boolean;
-  /** Disables the card */
-  disabled?: boolean;
-  /** When true, hides the default border of the card. */
-  hideBorder?: boolean;
-  /** When true, applies a tinted background color to the card. */
-  tinted?: boolean;
-  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
-  orientation?: CardOrientation;
-}
-
-// ── 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;
+  onSgdsHide?: SgdsEventHandler;
 }
 
 // ── Button ─────────────────────────────────────────────────────────────
@@ -239,7 +206,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;
+  onSgdsFocus?: SgdsEventHandler;
 }
 
 // ── Badge ─────────────────────────────────────────────────────────────
@@ -259,9 +228,52 @@ 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;
+}
+
+// ── Card ─────────────────────────────────────────────────────────────
+
+export interface SgdsCardProps extends SgdsBaseProps {
+  /** Sets the image position of the card. Available options: `before`, `after` */
+  imagePosition?: CardImagePosition;
+  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
+  imageAdjustment?: CardImageAdjustment;
+  /** Used only for SSR to indicate the presence of the `image` slot. */
+  hasImageSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `icon` slot. */
+  hasIconSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `upper` slot. */
+  hasUpperSlot?: boolean;
+  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
+  stretchedLink?: boolean;
+  /** Disables the card */
+  disabled?: boolean;
+  /** When true, hides the default border of the card. */
+  hideBorder?: boolean;
+  /** When true, applies a tinted background color to the card. */
+  tinted?: boolean;
+  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+  orientation?: CardOrientation;
+}
+
+// ── 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;
 }
 
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
@@ -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 ─────────────────────────────────────────────────────────────
@@ -415,16 +433,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 ─────────────────────────────────────────────────────────────
@@ -482,12 +511,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 ─────────────────────────────────────────────────────────────
@@ -540,11 +576,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 ─────────────────────────────────────────────────────────────
@@ -575,10 +617,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 ─────────────────────────────────────────────────────────────
@@ -617,9 +664,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 ─────────────────────────────────────────────────────────────
@@ -697,7 +748,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 ─────────────────────────────────────────────────────────────
@@ -815,11 +868,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 ─────────────────────────────────────────────────────────────
@@ -867,9 +926,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 ─────────────────────────────────────────────────────────────
@@ -893,10 +956,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 ─────────────────────────────────────────────────────────────
@@ -922,6 +990,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 ─────────────────────────────────────────────────────────────
@@ -980,7 +1049,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 ─────────────────────────────────────────────────────────────
@@ -1011,6 +1082,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 ─────────────────────────────────────────────────────────────
@@ -1027,7 +1099,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 ─────────────────────────────────────────────────────────────
@@ -1089,13 +1163,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 ─────────────────────────────────────────────────────────────
@@ -1185,11 +1267,18 @@ export interface SgdsSidenavItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsSidenavItem */
   disabled?: boolean;
+  /** Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute. */
+  ariaLabel?: string;
   "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 ─────────────────────────────────────────────────────────────
@@ -1274,11 +1363,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 ─────────────────────────────────────────────────────────────
@@ -1296,9 +1391,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 ─────────────────────────────────────────────────────────────
@@ -1317,6 +1416,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 ─────────────────────────────────────────────────────────────
@@ -1327,6 +1427,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 ─────────────────────────────────────────────────────────────
@@ -1341,7 +1442,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 ─────────────────────────────────────────────────────────────
@@ -1354,7 +1457,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 ─────────────────────────────────────────────────────────────
@@ -1486,11 +1591,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 ─────────────────────────────────────────────────────────────
@@ -1536,9 +1647,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 ─────────────────────────────────────────────────────────────
@@ -1551,9 +1666,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;
 }
 
 // ---------------------------------------------------------------------------
@@ -1567,11 +1686,11 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
+      "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
       "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
-      "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
@@ -1650,11 +1769,11 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
+    "sgds-button": HTMLElement;
+    "sgds-badge": HTMLElement;
     "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
-    "sgds-button": HTMLElement;
-    "sgds-badge": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;