@govtechsg/sgds-web-component 3.22.0 → 3.22.1

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,32 +150,35 @@ 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;
 }
 
-// ── Card ─────────────────────────────────────────────────────────────
+// ── Badge ─────────────────────────────────────────────────────────────
 
-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;
+export interface SgdsBadgeProps extends SgdsBaseProps {
+  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
+  show?: boolean;
+  /** One or more badge variant combinations.
+Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
+
+(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
+  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
+  /** Manually set the outlined state to false */
+  outlined?: boolean;
+  /** Manually set the dismissible state of the button to `false` */
+  dismissible?: boolean;
+  /** 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 ─────────────────────────────────────────────────────────────
@@ -239,29 +246,34 @@ 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 ─────────────────────────────────────────────────────────────
-
-export interface SgdsBadgeProps extends SgdsBaseProps {
-  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
-  show?: boolean;
-  /** One or more badge variant combinations.
-Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
+// ── Card ─────────────────────────────────────────────────────────────
 
-(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
-  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
-  /** Manually set the outlined state to false */
-  outlined?: boolean;
-  /** Manually set the dismissible state of the button to `false` */
-  dismissible?: boolean;
-  /** Manually enable full width */
-  fullWidth?: boolean;
-  "onsgds-show"?: SgdsEventHandler;
-  "onsgds-hide"?: SgdsEventHandler;
-  "onsgds-after-show"?: SgdsEventHandler;
-  "onsgds-after-hide"?: SgdsEventHandler;
+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;
 }
 
 // ── 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,28 @@ 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;
+}
+
+// ── Divider ─────────────────────────────────────────────────────────────
+
+export interface SgdsDividerProps extends SgdsBaseProps {
+  /** Sets the orientation of divider to vertical. Defaults to horizontal */
+  orientation?: "horizontal" | "vertical";
+  /** Sets the orientation of divider to vertical. Defaults to false */
+  thickness?: "thin" | "thick" | "thicker";
 }
 
 // ── DescriptionListGroup ─────────────────────────────────────────────────────────────
@@ -512,15 +557,6 @@ export interface SgdsDescriptionListProps extends SgdsBaseProps {
   bordered?: boolean;
 }
 
-// ── Divider ─────────────────────────────────────────────────────────────
-
-export interface SgdsDividerProps extends SgdsBaseProps {
-  /** Sets the orientation of divider to vertical. Defaults to horizontal */
-  orientation?: "horizontal" | "vertical";
-  /** Sets the orientation of divider to vertical. Defaults to false */
-  thickness?: "thin" | "thick" | "thicker";
-}
-
 // ── Drawer ─────────────────────────────────────────────────────────────
 
 export interface SgdsDrawerProps extends SgdsBaseProps {
@@ -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 ─────────────────────────────────────────────────────────────
@@ -1186,10 +1268,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 ─────────────────────────────────────────────────────────────
@@ -1274,11 +1361,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 +1389,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 +1414,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 +1425,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 +1440,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 +1455,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 +1589,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 +1645,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 +1664,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,20 +1684,20 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
-      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
+      "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, 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-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
       "sgds-combo-box-option": React.DetailedHTMLProps<SgdsComboBoxOptionProps, HTMLElement>;
       "sgds-combo-box": React.DetailedHTMLProps<SgdsComboBoxProps, HTMLElement>;
       "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
+      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
       "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
-      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-drawer": React.DetailedHTMLProps<SgdsDrawerProps, HTMLElement>;
       "sgds-dropdown-item": React.DetailedHTMLProps<SgdsDropdownItemProps, HTMLElement>;
       "sgds-dropdown": React.DetailedHTMLProps<SgdsDropdownProps, HTMLElement>;
@@ -1650,20 +1767,20 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
-    "sgds-card": HTMLElement;
+    "sgds-badge": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
     "sgds-button": HTMLElement;
-    "sgds-badge": HTMLElement;
+    "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;
     "sgds-combo-box-option": HTMLElement;
     "sgds-combo-box": HTMLElement;
     "sgds-datepicker": HTMLElement;
+    "sgds-divider": HTMLElement;
     "sgds-description-list-group": HTMLElement;
     "sgds-description-list": HTMLElement;
-    "sgds-divider": HTMLElement;
     "sgds-drawer": HTMLElement;
     "sgds-dropdown-item": HTMLElement;
     "sgds-dropdown": HTMLElement;