@govtechsg/sgds-web-component 3.21.2-rc.5 → 3.22.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 support both forms:
- *   - Kebab-case (React 19 intrinsic elements): <sgds-input onsgds-change={handler} />
- *   - CamelCase (@lit/react wrappers):          <SgdsInput onSgdsChange={handler} />
+ * Custom event handlers use the lowercase kebab-case `onsgds-*` form —
+ * React 19 maps these directly to native addEventListener calls:
+ *   <sgds-input onsgds-change={handler} />
  */
 
 export {};
@@ -107,13 +107,9 @@ 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 ─────────────────────────────────────────────────────────────
@@ -150,35 +146,32 @@ 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 ─────────────────────────────────────────────────────────────
-
-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;
-  onSgdsShow?: SgdsEventHandler;
-  "onsgds-hide"?: SgdsEventHandler;
-  onSgdsHide?: SgdsEventHandler;
-  "onsgds-after-show"?: SgdsEventHandler;
-  onSgdsAfterShow?: SgdsEventHandler;
-  "onsgds-after-hide"?: SgdsEventHandler;
-  onSgdsAfterHide?: 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;
 }
 
 // ── BreadcrumbItem ─────────────────────────────────────────────────────────────
@@ -246,34 +239,29 @@ 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;
 }
 
-// ── 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;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
 }
 
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
@@ -303,7 +291,6 @@ 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 ─────────────────────────────────────────────────────────────
@@ -338,15 +325,10 @@ 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,6 +395,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
   invalidFeedback?: string;
   /** Marks the component as invalid. Replace the pseudo :invalid selector. */
   invalid?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** The list of items to display in the dropdown.
 `interface SgdsComboBoxItemData {
 label: string;
@@ -431,27 +415,16 @@ 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 ─────────────────────────────────────────────────────────────
@@ -509,19 +482,12 @@ 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 ─────────────────────────────────────────────────────────────
@@ -574,17 +540,11 @@ 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 ─────────────────────────────────────────────────────────────
@@ -615,15 +575,10 @@ 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 ─────────────────────────────────────────────────────────────
@@ -662,13 +617,9 @@ 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 ─────────────────────────────────────────────────────────────
@@ -746,9 +697,7 @@ export interface SgdsIconButtonProps extends SgdsBaseProps {
   /** When true, shows a loading spinner */
   loading?: boolean;
   "onsgds-blur"?: SgdsEventHandler;
-  onSgdsBlur?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
-  onSgdsFocus?: SgdsEventHandler;
 }
 
 // ── IconCard ─────────────────────────────────────────────────────────────
@@ -830,6 +779,8 @@ export interface SgdsInputProps extends SgdsBaseProps {
   autofocus?: boolean;
   /** Makes the input readonly. */
   readonly?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
 implied, allowing any numeric value. Only applies to number input types. */
   step?: number | "any";
@@ -864,17 +815,11 @@ 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 ─────────────────────────────────────────────────────────────
@@ -922,13 +867,9 @@ 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 ─────────────────────────────────────────────────────────────
@@ -952,15 +893,10 @@ 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 ─────────────────────────────────────────────────────────────
@@ -986,7 +922,6 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1045,9 +980,7 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1078,7 +1011,6 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1095,9 +1027,7 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1139,6 +1069,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
   invalidFeedback?: string;
   /** Marks the component as invalid. Replace the pseudo :invalid selector. */
   invalid?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** The list of items to display in the dropdown.
 `interface SgdsComboBoxItemData {
 label: string;
@@ -1157,21 +1089,13 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1262,15 +1186,10 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1355,17 +1274,11 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1383,13 +1296,9 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1408,7 +1317,6 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1419,7 +1327,6 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1434,9 +1341,7 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1449,9 +1354,7 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1583,17 +1486,11 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1639,13 +1536,9 @@ 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 ─────────────────────────────────────────────────────────────
@@ -1658,13 +1551,9 @@ 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;
 }
 
 // ---------------------------------------------------------------------------
@@ -1678,11 +1567,11 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, 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-card": React.DetailedHTMLProps<SgdsCardProps, 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>;
@@ -1761,11 +1650,11 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
-    "sgds-badge": HTMLElement;
+    "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
     "sgds-button": HTMLElement;
-    "sgds-card": HTMLElement;
+    "sgds-badge": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;