@govtechsg/sgds-web-component 3.15.1-rc.2 → 3.15.1-rc.3

package/types/react.d.ts

@@ -0,0 +1,1623 @@
+/**
+ * SGDS Web Components – React TypeScript Type Definitions
+ *
+ * Auto-generated by scripts/generateSgdsTypes.mjs — do not edit by hand.
+ *
+ * Provides typed JSX intrinsic elements for all `sgds-*` custom elements so
+ * that React and Next.js TypeScript projects get IntelliSense and type-safety
+ * without importing the full library at runtime.
+ *
+ * Usage – add ONE of the following to your project's `types.d.ts`:
+ *
+ *   // Triple-slash reference (works in any tsconfig):
+ *   /// <reference path="node_modules/@govtechsg/sgds-web-component/sgds-types.d.ts" />
+ *
+ *   // 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} />
+ */
+
+export {};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type SgdsEventHandler = (event: CustomEvent) => void;
+
+/** Common props shared by every SGDS element */
+interface SgdsBaseProps extends React.HTMLAttributes<HTMLElement> {
+  /** Override the CSS `class` attribute (use `className` in JSX for React) */
+  class?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Event detail interfaces (from per-component types.d.ts)
+// ---------------------------------------------------------------------------
+
+// ── Card ─────────────────────────────────────────────────────────────
+
+type CardImageAdjustment = "default" | "padding around" | "aspect ratio";
+type CardImagePosition = "before" | "after";
+type CardOrientation = "vertical" | "horizontal";
+
+// ── ComboBox ─────────────────────────────────────────────────────────────
+
+interface ISgdsComboBoxInputEventDetail {
+    displayValue: string;
+}
+
+// ── Datepicker ─────────────────────────────────────────────────────────────
+
+type ViewEnum = "days" | "months" | "years";
+
+// ── FileUpload ─────────────────────────────────────────────────────────────
+
+type ISgdsFileUploadFilesSelectedEventDetail = FileList;
+
+// ── Pagination ─────────────────────────────────────────────────────────────
+
+interface ISgdsPaginationPageChangeEventDetail {
+    currentPage: number;
+}
+
+// ── Radio ─────────────────────────────────────────────────────────────
+
+interface ISgdsRadioGroupChangeEventDetail {
+    value: string;
+}
+
+// ── Stepper ─────────────────────────────────────────────────────────────
+
+interface IStepMetaData {
+    component: unknown;
+    stepHeader: string;
+    iconName?: string;
+}
+
+// ── Switch ─────────────────────────────────────────────────────────────
+
+interface ISgdsSwitchChangeEventDetail {
+    checked: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Component prop interfaces
+// ---------------------------------------------------------------------------
+
+// ── AccordionItem ─────────────────────────────────────────────────────────────
+
+interface SgdsAccordionItemProps extends SgdsBaseProps {
+  /** Controls whether accordion-item is open or close */
+  open?: boolean;
+  /** Disables the accordion item */
+  disabled?: boolean;
+  /** Controls the density of the individual accordion item. This value is controlled by sgds-accordion */
+  density?: AccordionDensity;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── Accordion ─────────────────────────────────────────────────────────────
+
+interface SgdsAccordionProps extends SgdsBaseProps {
+  /** Allows multiple accordion items to be opened at the same time */
+  allowMultiple?: boolean;
+  /** The variant of accordion */
+  variant?: "default" | "border";
+  /** The density of accordion */
+  density?: "default" | "compact";
+}
+
+// ── AlertLink ─────────────────────────────────────────────────────────────
+
+interface SgdsAlertLinkProps extends SgdsBaseProps {
+  /** Forwards to href attribute of anchor element */
+  href?: string;
+  /** Tells the browser where to open the link */
+  target?: "_blank" | "_parent" | "_self" | "_top";
+}
+
+// ── Alert ─────────────────────────────────────────────────────────────
+
+interface SgdsAlertProps extends SgdsBaseProps {
+  /** Controls the appearance of the alert */
+  show?: boolean;
+  /** Enables a close button that allows the user to dismiss the alert. */
+  dismissible?: boolean;
+  /** The alert's theme variant. */
+  variant?: "info" | "success" | "danger" | "warning" | "neutral";
+  /** Controls the alert visual between a lighter outline and a solid darker variant. */
+  outlined?: boolean;
+  /** The title of the alert. Only text is allowed */
+  title?: string;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+}
+
+// ── Badge ─────────────────────────────────────────────────────────────
+
+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;
+}
+
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+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 ─────────────────────────────────────────────────────────────
+
+interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
+}
+
+// ── Button ─────────────────────────────────────────────────────────────
+
+interface SgdsButtonProps extends SgdsBaseProps {
+  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */
+  type?: "button" | "submit" | "reset";
+  /** The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+value of this attribute must be an id of a form in the same document or shadow root as the button. */
+  form?: string;
+  /** Used to override the form owner's `action` attribute. */
+  formAction?: string;
+  /** Used to override the form owner's `method` attribute. */
+  formMethod?: "post" | "get";
+  /** Used to override the form owner's `novalidate` attribute. */
+  formNoValidate?: boolean;
+  /** Used to override the form owner's `target` attribute. */
+  formTarget?: | "_self"
+    | "_blank"
+    | "_parent"
+    | "_top"
+    | string;
+  /** When set, the button will be in full width. */
+  fullWidth?: boolean;
+  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */
+  hasLeftIconSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */
+  hasRightIconSlot?: boolean;
+  /** Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6 */
+  variant?: "primary" | "outline" | "ghost" | "danger";
+  /** Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral` */
+  tone?: "brand" | "danger" | "fixed-light" | "neutral";
+  /** Specifies a small, medium or large button, the size is medium by default. */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Manually set the visual state of the button to `:active` */
+  active?: boolean;
+  /** The disabled state of the button */
+  disabled?: boolean;
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  href?: string;
+  /** Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute */
+  target?: "_blank" | "_parent" | "_self" | "_top";
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  download?: string;
+  /** The aria-label attribute to passed to button element when necessary */
+  ariaLabel?: string;
+  /** When true, shows a loading spinner */
+  loading?: boolean;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+}
+
+// ── Card ─────────────────────────────────────────────────────────────
+
+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 ─────────────────────────────────────────────────────────────
+
+interface SgdsCheckboxGroupProps extends SgdsBaseProps {
+  /** The checkbox group's label */
+  label?: string;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */
+  hasFeedback?: boolean;
+  /** The checkbox group's hint text */
+  hintText?: string;
+  /** Makes the checkbox group a required field. Only available for when multiselect is true */
+  required?: boolean;
+  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */
+  value?: string;
+  defaultValue?: string;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: SgdsEventHandler;
+}
+
+// ── Checkbox ─────────────────────────────────────────────────────────────
+
+interface SgdsCheckboxProps extends SgdsBaseProps {
+  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+  value?: string;
+  /** Draws the checkbox in a checked state. */
+  checked?: boolean;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: "style" | "text" | "both";
+  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+  defaultChecked?: boolean;
+  /** Marks the checkbox input as indeterminate , with indeterminate logo */
+  indeterminate?: boolean;
+  /** Makes the checkbox a required field. */
+  required?: boolean;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's label */
+  label?: string;
+  /** The input's hint text */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-check"?: SgdsEventHandler;
+  "onsgds-uncheck"?: SgdsEventHandler;
+}
+
+// ── CloseButton ─────────────────────────────────────────────────────────────
+
+interface SgdsCloseButtonProps extends SgdsBaseProps {
+  /** Specifies a large or small button */
+  size?: "sm" | "md";
+  /** The tone of the close button */
+  tone?: "default" | "fixed-dark" | "fixed-light";
+}
+
+// ── ComboBoxOption ─────────────────────────────────────────────────────────────
+
+interface SgdsComboBoxOptionProps extends SgdsBaseProps {
+  /** Disables the Item */
+  disabled?: boolean;
+  /** The value of the option item */
+  value?: string;
+}
+
+// ── ComboBox ─────────────────────────────────────────────────────────────
+
+interface SgdsComboBoxProps extends SgdsBaseProps {
+  /** If true, renders multiple checkbox selection items. If false, single-select. */
+  multiSelect?: boolean;
+  /** If true, renders badge that fills width of combobox */
+  badgeFullWidth?: boolean;
+  /** If true, a clear button will be enabled on focus */
+  clearable?: boolean;
+  /** Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. */
+  async?: boolean;
+  /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */
+  emptyMenuAsync?: boolean;
+  /** The function used to filter the menu list, given the user's input value. */
+  filterFunction?: (inputValue: string, item: SgdsComboBoxOptionData) => boolean;
+  /** The input's label */
+  label?: string;
+  /** The input's hint text below the label */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** The input's placeholder text. */
+  placeholder?: string;
+  /** Autofocus the input */
+  autofocus?: boolean;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Makes the input a required field. */
+  required?: boolean;
+  /** Sets the loading state of the component */
+  loading?: boolean;
+  /** IMPORTANT:
+We still expose `.value` externally, but this is now the underlying ID or data
+(e.g. 1, 2, 'abc', ...), not the label that appears in the input box. */
+  value?: string;
+  displayValue?: string;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector. */
+  invalid?: boolean;
+  /** The list of items to display in the dropdown.
+`interface SgdsComboBoxItemData {
+label: string;
+value: string;
+}` */
+  menuList?: SgdsOptionData[];
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: string;
+  /** Additional configuration to pass to Floating UI. */
+  floatingOpts?: { placement?: Placement; middleware?: Array<Middleware> };
+  hidden?: boolean;
+  /** When true, dropdown menu shows on first load */
+  menuIsOpen?: boolean;
+  /** Makes the input readonly. */
+  readonly?: boolean;
+  "onsgds-select"?: SgdsEventHandler;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-input"?: (event: CustomEvent<ISgdsComboBoxInputEventDetail>) => void;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── Datepicker ─────────────────────────────────────────────────────────────
+
+interface SgdsDatepickerProps extends SgdsBaseProps {
+  /** When true, adds required attribute to input element */
+  required?: boolean;
+  /** The datepicker input's name attribute */
+  name?: string;
+  /** When true, adds disabled attribute to input and button element */
+  disabled?: boolean;
+  /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
+Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
+For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode */
+  value?: string;
+  /** Deprecated since v3.3.0 in favour of `value`.
+The initial value of DatePicker on first load for single &
+range mode as array of string. eg.'["22/12/2023"]' for single &
+'["22/12/2023","25/12/2023"]' for range respectively @deprecated */
+  initialValue?: string[];
+  /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+  minDate?: string;
+  /** ISO date string to set the highest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+  maxDate?: string;
+  /** Changes DatePicker to single date selection or range date selection */
+  mode?: "single" | "range";
+  /** Feedback text for error state when date input is invalid */
+  invalidFeedback?: string;
+  /** Allows invalidFeedback and invalid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** The datepicker input's label */
+  label?: string;
+  /** The datepicker input's hint text below the label */
+  hintText?: string;
+  /** Controls auto-flipping of menu */
+  noFlip?: boolean;
+  /** The drop position of menu relative to the toggle button */
+  drop?: "up" | "down";
+  /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */
+  displayDate?: Date;
+  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+  defaultValue?: string;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** Additional configuration to pass to Floating UI. */
+  floatingOpts?: { placement?: Placement; middleware?: Array<Middleware> };
+  /** When true, dropdown menu shows on first load */
+  menuIsOpen?: boolean;
+  /** Makes the input readonly. */
+  readonly?: boolean;
+  "onsgds-change-date"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── DescriptionListGroup ─────────────────────────────────────────────────────────────
+
+interface SgdsDescriptionListGroupProps extends SgdsBaseProps {
+  /** When true, adds a border around the entire group. */
+  bordered?: boolean;
+  /** When true, the description lists are displayed in a stacked layout. */
+  stacked?: boolean;
+  /** Used only for SSR to indicate the presence of the `title` slot. */
+  hasTitleSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `description` slot. */
+  hasDescriptionSlot?: boolean;
+}
+
+// ── DescriptionList ─────────────────────────────────────────────────────────────
+
+interface SgdsDescriptionListProps extends SgdsBaseProps {
+  /** Makes the label and the data stacked */
+  stacked?: boolean;
+  /** Changes the border bottom styles for bordered description list group */
+  bordered?: boolean;
+}
+
+// ── Divider ─────────────────────────────────────────────────────────────
+
+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 ─────────────────────────────────────────────────────────────
+
+interface SgdsDrawerProps extends SgdsBaseProps {
+  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
+  open?: boolean;
+  /** Defines the size of the drawer panel.
+For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.
+For drawers placed on the top or bottom, this controls the drawer's height.
+Accepts `small`, `medium`, or `large`. Defaults to `small`. */
+  size?: "sm" | "md" | "lg";
+  /** The direction from which the drawer will open. */
+  placement?: "top" | "end" | "bottom" | "start";
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this attribute and add `position: relative` to the parent. */
+  contained?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  "onsgds-initial-focus"?: SgdsEventHandler;
+  "onsgds-request-close"?: SgdsEventHandler;
+}
+
+// ── DropdownItem ─────────────────────────────────────────────────────────────
+
+interface SgdsDropdownItemProps extends SgdsBaseProps {
+  /** when true, sets the active stylings of dropdown item */
+  active?: boolean;
+  /** Disables the SgdsMainnavItem */
+  disabled?: boolean;
+}
+
+// ── Dropdown ─────────────────────────────────────────────────────────────
+
+interface SgdsDropdownProps extends SgdsBaseProps {
+  /** Controls auto-flipping of menu */
+  noFlip?: boolean;
+  /** When true, aligns right edge of menu with right edge of button */
+  menuAlignRight?: boolean;
+  /** The drop position of menu relative to the toggle button */
+  drop?: "left" | "right" | "up" | "down";
+  hidden?: boolean;
+  /** Additional configuration to pass to Floating UI. */
+  floatingOpts?: { placement?: Placement; middleware?: Array<Middleware> };
+  /** When true, dropdown menu shows on first load */
+  menuIsOpen?: boolean;
+  /** Disables the dropdown toggle */
+  disabled?: boolean;
+  /** Makes the input readonly. */
+  readonly?: boolean;
+  "onsgds-select"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── FileUpload ─────────────────────────────────────────────────────────────
+
+interface SgdsFileUploadProps extends SgdsBaseProps {
+  /** Allows multiple files to be listed for uploading */
+  multiple?: boolean;
+  /** Specify the acceptable file type */
+  accept?: string;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Makes the input as a required field. */
+  required?: boolean;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: string;
+  /** Returns files selected for upload */
+  files?: File[];
+  /** The input's label */
+  label?: string;
+  /** The input's hint text */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-files-selected"?: (event: CustomEvent<ISgdsFileUploadFilesSelectedEventDetail>) => void;
+}
+
+// ── FooterItem ─────────────────────────────────────────────────────────────
+
+interface SgdsFooterItemProps extends SgdsBaseProps {
+}
+
+// ── Footer ─────────────────────────────────────────────────────────────
+
+interface SgdsFooterProps extends SgdsBaseProps {
+  /** Sets copyrightLiner of SgdsFooter */
+  copyrightLiner?: string;
+  /** href link for contacts */
+  contactHref?: string;
+  /** href link for feedback */
+  feedbackHref?: string;
+  /** href link for faq (optional) */
+  faqHref?: string;
+  /** href link for sitemap (optional) */
+  sitemapHref?: string;
+  /** href link for privacy statement */
+  privacyHref?: string;
+  /** href link for terms of use */
+  termsOfUseHref?: string;
+  /** Used only for SSR to indicate the presence of the `default` slot. */
+  hasDefaultSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `title` slot. */
+  hasTitleSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `description` slot. */
+  hasDescriptionSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `items` slot. */
+  hasItemsSlot?: boolean;
+}
+
+// ── Icon ─────────────────────────────────────────────────────────────
+
+interface SgdsIconProps extends SgdsBaseProps {
+  /** The name of the icon from sgds icon library */
+  name?: string;
+  /** Specifies a small, medium or large icon, the size is medium by default. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2-xl" | "3-xl";
+}
+
+// ── IconButton ─────────────────────────────────────────────────────────────
+
+interface SgdsIconButtonProps extends SgdsBaseProps {
+  /** The name of the icon from sgds icon library */
+  name?: string;
+  /** Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6 */
+  variant?: "primary" | "outline" | "ghost" | "danger";
+  /** Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral` */
+  tone?: "brand" | "danger" | "fixed-light" | "neutral";
+  /** Specifies a small, medium or large button, the size is medium by default. */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Manually set the visual state of the button to `:active` */
+  active?: boolean;
+  /** The disabled state of the button */
+  disabled?: boolean;
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  href?: string;
+  /** Where to display the linked URL, as the name for a browsing context. Forwards to the HTMLAnchor target attribute */
+  target?: "_blank" | "_parent" | "_self" | "_top";
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  download?: string;
+  /** The aria-label attribute to passed to button element when necessary */
+  ariaLabel?: string;
+  /** When true, shows a loading spinner */
+  loading?: boolean;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+}
+
+// ── IconCard ─────────────────────────────────────────────────────────────
+
+interface SgdsIconCardProps extends SgdsBaseProps {
+  /** Removes the card's internal padding when set to true. */
+  noPadding?: 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;
+}
+
+// ── IconList ─────────────────────────────────────────────────────────────
+
+interface SgdsIconListProps extends SgdsBaseProps {
+  /** Sets the aria-role of the sgds-icon-list */
+  role?: string;
+  /** The size of icon list. Changes the font-size the list items */
+  size?: "sm" | "md" | "lg";
+}
+
+// ── ImageCard ─────────────────────────────────────────────────────────────
+
+interface SgdsImageCardProps extends SgdsBaseProps {
+  /** Removes the card's internal padding when set to true. */
+  noPadding?: boolean;
+  /** 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;
+  /** 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;
+}
+
+// ── Input ─────────────────────────────────────────────────────────────
+
+interface SgdsInputProps extends SgdsBaseProps {
+  type?: | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "datetime-local";
+  /** The prefix of the input */
+  prefix?: string;
+  /** The suffix of the input */
+  suffix?: string;
+  /** Sets the minimum length of the input */
+  minlength?: number;
+  /** Sets the maximum length of the input */
+  maxlength?: number;
+  /** The input's minimum value. Only applies number input types. */
+  min?: number;
+  /** The input's maximum value. Only applies number input types. */
+  max?: number;
+  /** The input's placeholder text. */
+  placeholder?: string;
+  /** A pattern to validate input against. */
+  pattern?: string;
+  /** Autofocus the input */
+  autofocus?: boolean;
+  /** Makes the input readonly. */
+  readonly?: boolean;
+  /** 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";
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: "style" | "text" | "both";
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+  defaultValue?: string;
+  /** Marks the component as valid. */
+  valid?: boolean;
+  /** Marks the component as loading. */
+  loading?: boolean;
+  /** Makes the input a required field. */
+  required?: boolean;
+  /** Disables native and sgds validation for the input. */
+  noValidate?: boolean;
+  /** The input's value attribute. */
+  value?: string;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's label */
+  label?: string;
+  /** The input's hint text */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-input"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
+}
+
+// ── Link ─────────────────────────────────────────────────────────────
+
+interface SgdsLinkProps extends SgdsBaseProps {
+  /** Determines the size of the link */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Sets the colour of the link @deprecated since 3.6.0 */
+  variant?: "primary" | "danger" | "neutral" | "light" | "dark";
+  /** Sets the colour of the link, replaces variant prop */
+  tone?: "primary" | "danger" | "neutral" | "fixed-light" | "fixed-dark";
+  /** When true, sets the active stylings of the link */
+  active?: boolean;
+  /** Disables the link */
+  disabled?: boolean;
+}
+
+// ── MainnavDropdown ─────────────────────────────────────────────────────────────
+
+interface SgdsMainnavDropdownProps extends SgdsBaseProps {
+  /** When true,  applies active styles on the dropdown button */
+  active?: boolean;
+  /** When true,  applies active styles on the dropdown button */
+  disabled?: boolean;
+}
+
+// ── MainnavItem ─────────────────────────────────────────────────────────────
+
+interface SgdsMainnavItemProps extends SgdsBaseProps {
+  /** when true, sets the active stylings of the navigation item */
+  active?: boolean;
+  /** Disables the SgdsMainnavItem */
+  disabled?: boolean;
+}
+
+// ── Mainnav ─────────────────────────────────────────────────────────────
+
+interface SgdsMainnavProps extends SgdsBaseProps {
+  /** The href link for brand logo */
+  brandHref?: string;
+  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
+  expand?: "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
+  /** When true, removes max-width constraint to allow content to stretch full screen width */
+  fluid?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── Masthead ─────────────────────────────────────────────────────────────
+
+interface SgdsMastheadProps extends SgdsBaseProps {
+  /** When true, removes max-width constraint to allow content to stretch full screen width */
+  fluid?: boolean;
+}
+
+// ── Modal ─────────────────────────────────────────────────────────────
+
+interface SgdsModalProps extends SgdsBaseProps {
+  /** Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */
+  open?: boolean;
+  /** Removes the default animation when opening and closing of modal */
+  noAnimation?: boolean;
+  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */
+  size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
+  /** Used only for SSR to indicate the presence of the `footer` slot. */
+  hasFooterSlot?: boolean;
+  /** Removes the close button in the modal header. */
+  noCloseButton?: boolean;
+  "onsgds-close"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── OverflowMenu ─────────────────────────────────────────────────────────────
+
+interface SgdsOverflowMenuProps extends SgdsBaseProps {
+  /** Specifies a large or small button */
+  size?: "sm" | "md";
+}
+
+// ── Pagination ─────────────────────────────────────────────────────────────
+
+interface SgdsPaginationProps extends SgdsBaseProps {
+  /** Inserts the length value from a given sets of data objects */
+  dataLength?: number;
+  /** Sets the starting active page upon render */
+  currentPage?: number;
+  /** Sets the amount of data objects to be displayed per page */
+  itemsPerPage?: number;
+  /** Sets the variant of the pagination. */
+  variant?: "default" | "number" | "button" | "description";
+  /** Sets the page direction button to contain text and/or icon */
+  navigation?: "button" | "icon-button";
+  /** Sets the size of all page items. */
+  size?: "sm" | "md";
+  "onsgds-page-change"?: (event: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => void;
+}
+
+// ── ProgressBar ─────────────────────────────────────────────────────────────
+
+interface SgdsProgressBarProps extends SgdsBaseProps {
+  /** The background color of the progress bar. Available options: `primary`, `neutral` */
+  variant?: "primary" | "neutral";
+  /** The current progress as a percentage, from 0 to 100. */
+  value?: number;
+  /** Sets the minimun aria range for assistive devices.
+
+The aria-valuemin attribute defines the minimun allowed value for a range widget. */
+  ariamin?: number;
+  /** Sets the maximum aria range for assistive devices.
+
+The aria-valuemax attribute defines the maximum allowed value for a range widget. */
+  ariamax?: number;
+  /** Sets the aria label for assistive devices. */
+  arialabel?: string;
+  /** Add label on top of progress bar */
+  label?: string;
+}
+
+// ── QuantityToggle ─────────────────────────────────────────────────────────────
+
+interface SgdsQuantityToggleProps extends SgdsBaseProps {
+  /** The input's value. Set to 0 by default */
+  value?: number;
+  /** Controls the incremental / decremental value of the input */
+  step?: number;
+  /** The input's minimum value. Only applies number input types. */
+  min?: number;
+  /** The input's maximum value. Only applies number input types. */
+  max?: number;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: "style" | "text" | "both";
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Sets the quantity toggle as readonly */
+  readonly?: boolean;
+  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+  defaultValue?: number;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's label */
+  label?: string;
+  /** The input's hint text */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-input"?: SgdsEventHandler;
+}
+
+// ── RadioGroup ─────────────────────────────────────────────────────────────
+
+interface SgdsRadioGroupProps extends SgdsBaseProps {
+  /** The selected value of the control. */
+  value?: string;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** Makes the input as a required field. */
+  required?: boolean;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's label */
+  label?: string;
+  /** The input's hint text */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: (event: CustomEvent<ISgdsRadioGroupChangeEventDetail>) => void;
+}
+
+// ── Radio ─────────────────────────────────────────────────────────────
+
+interface SgdsRadioProps extends SgdsBaseProps {
+  /** Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop */
+  checked?: boolean;
+  /** The radio's value attribute. */
+  value?: string;
+  /** Disables the radio. */
+  disabled?: boolean;
+  /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+}
+
+// ── SelectOption ─────────────────────────────────────────────────────────────
+
+interface SgdsSelectOptionProps extends SgdsBaseProps {
+  /** Disables the Item */
+  disabled?: boolean;
+  /** The value of the option item */
+  value?: string;
+}
+
+// ── Select ─────────────────────────────────────────────────────────────
+
+interface SgdsSelectProps extends SgdsBaseProps {
+  /** The input's label */
+  label?: string;
+  /** The input's hint text below the label */
+  hintText?: string;
+  /** The input's name attribute */
+  name?: string;
+  /** The input's placeholder text. */
+  placeholder?: string;
+  /** Autofocus the input */
+  autofocus?: boolean;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Makes the input a required field. */
+  required?: boolean;
+  /** Sets the loading state of the component */
+  loading?: boolean;
+  /** IMPORTANT:
+We still expose `.value` externally, but this is now the underlying ID or data
+(e.g. 1, 2, 'abc', ...), not the label that appears in the input box. */
+  value?: string;
+  displayValue?: string;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** Feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector. */
+  invalid?: boolean;
+  /** The list of items to display in the dropdown.
+`interface SgdsComboBoxItemData {
+label: string;
+value: string;
+}` */
+  menuList?: SgdsOptionData[];
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: string;
+  /** Additional configuration to pass to Floating UI. */
+  floatingOpts?: { placement?: Placement; middleware?: Array<Middleware> };
+  hidden?: boolean;
+  /** When true, dropdown menu shows on first load */
+  menuIsOpen?: boolean;
+  /** Makes the input readonly. */
+  readonly?: boolean;
+  "onsgds-select"?: SgdsEventHandler;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── SidebarGroup ─────────────────────────────────────────────────────────────
+
+interface SgdsSidebarGroupProps extends SgdsBaseProps {
+  /** Reports the visibility state of the submenu for nested groups.
+Returns true when the submenu is displayed showing child items, false when hidden.
+Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead. */
+  showMenu?: boolean;
+  /** The display title/label for the sidebar element.
+Shown in the UI and used for accessibility labels (aria-label). */
+  title?: string;
+  /** The unique name identifier for the sidebar element.
+Used to identify selections in sgds-select events and manage active states.
+Should be unique among siblings in the same navigation level. */
+  name?: string;
+}
+
+// ── SidebarItem ─────────────────────────────────────────────────────────────
+
+interface SgdsSidebarItemProps extends SgdsBaseProps {
+  /** The display title/label for the sidebar element.
+Shown in the UI and used for accessibility labels (aria-label). */
+  title?: string;
+  /** The unique name identifier for the sidebar element.
+Used to identify selections in sgds-select events and manage active states.
+Should be unique among siblings in the same navigation level. */
+  name?: string;
+}
+
+// ── SidebarSection ─────────────────────────────────────────────────────────────
+
+interface SgdsSidebarSectionProps extends SgdsBaseProps {
+  /** The display title/label for the sidebar section header.
+Always visible in the sidebar, used to group related items. */
+  title?: string;
+  /** Controls whether the section content is expanded or collapsed.
+When true, the section content is hidden but the section header remains visible.
+Only applicable when the section is collapsible. */
+  collapsed?: boolean;
+  /** Enables a collapsible section header with expand/collapse toggle functionality.
+When true, users can click the header to toggle section visibility.
+When false, the section header is display-only and not interactive. */
+  collapsible?: boolean;
+  seperator?: boolean;
+  /** The unique name identifier for the sidebar element.
+Used to identify selections in sgds-select events and manage active states.
+Should be unique among siblings in the same navigation level. */
+  name?: string;
+}
+
+// ── Sidebar ─────────────────────────────────────────────────────────────
+
+interface SgdsSidebarProps extends SgdsBaseProps {
+  /** Controls whether the sidebar is collapsed or expanded.
+When true, the sidebar is in collapsed state showing only icons.
+When false, the sidebar is expanded displaying full labels and content.
+Affects all child items by toggling visibility of labels and adjusting spacing. */
+  collapsed?: boolean;
+  /** The name of the currently active sidebar item or group.
+Reflects the selected item and allows external control of sidebar selection.
+Used to synchronize sidebar state with external navigation state or programmatic selection.
+When set, the corresponding item with matching `name` attribute will be highlighted as active. */
+  active?: string;
+  "onsgds-select"?: SgdsEventHandler;
+}
+
+// ── SidenavItem ─────────────────────────────────────────────────────────────
+
+interface SgdsSidenavItemProps extends SgdsBaseProps {
+  body?: HTMLElement;
+  /** when true, toggles the sidenav-item to open on first load and set the active stylings. */
+  active?: boolean;
+  /** Disables the SgdsSidenavItem */
+  disabled?: boolean;
+  "onsgds-toggle"?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── SidenavLink ─────────────────────────────────────────────────────────────
+
+interface SgdsSidenavLinkProps extends SgdsBaseProps {
+  /** when true, sets the active stylings of .nav-link */
+  active?: boolean;
+  /** Disables the SgdsMainnavItem */
+  disabled?: boolean;
+}
+
+// ── Sidenav ─────────────────────────────────────────────────────────────
+
+interface SgdsSidenavProps extends SgdsBaseProps {
+  /** Apply position sticky to the sidenav */
+  sticky?: boolean;
+}
+
+// ── Skeleton ─────────────────────────────────────────────────────────────
+
+interface SgdsSkeletonProps extends SgdsBaseProps {
+  /** Sets the width of skeleton. Pass value in string with length units like pixels or percentage. */
+  width?: string;
+  /** Sets the height of skeleton. Pass value in string with length units like pixels or percentage. */
+  height?: string;
+  /** Sets the border radius of skeleton. Pass value in string with length units like pixels and percentage
+When `row` is defined, the borderRadius is forwarded down to the border radius of each skeleton row */
+  borderRadius?: string;
+  /** Sets the number of rows within the given height of the skeleton.
+By default, the height of each row is auto-sized by taking the height of the skeleton divided by the number of rows and
+taking into account that there is a gap set by root css variable `--sgds-gap-xs` between each rows */
+  rows?: number;
+  /** Adds a sheening animated effect to the skeleton */
+  sheen?: boolean;
+}
+
+// ── Spinner ─────────────────────────────────────────────────────────────
+
+interface SgdsSpinnerProps extends SgdsBaseProps {
+  /** The variant of spinner. Deprecated in favor of `tone` @deprecated */
+  variant?: "primary" | "neutral";
+  /** The color tones of spinner, replaces variant prop */
+  tone?: "brand" | "neutral" | "inverse" | "fixed-light" | "fixed-dark";
+  /** Specifies a small, medium or large button, the size is medium by default. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Text label of the spinner */
+  label?: string;
+  /** Orientation of label relative to the spinner */
+  orientation?: "horizontal" | "vertical";
+}
+
+// ── Stepper ─────────────────────────────────────────────────────────────
+
+interface SgdsStepperProps extends SgdsBaseProps {
+  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional. */
+  steps?: IStepMetaData[];
+  /** The current state of active step. Defaults to 0 */
+  activeStep?: number;
+  /** The orientation of stepper. By default, the stepper is of horizontal orientation */
+  orientation?: "horizontal" | "vertical";
+  /** When true, the stepper's steps will be clickable */
+  clickable?: boolean;
+  "onsgds-next-step"?: SgdsEventHandler;
+  "onsgds-previous-step"?: SgdsEventHandler;
+  "onsgds-last-step"?: SgdsEventHandler;
+  "onsgds-first-step"?: SgdsEventHandler;
+  "onsgds-arrived"?: SgdsEventHandler;
+  "onsgds-reset"?: SgdsEventHandler;
+}
+
+// ── SubnavItem ─────────────────────────────────────────────────────────────
+
+interface SgdsSubnavItemProps extends SgdsBaseProps {
+  /** when true, sets the active stylings of the navigation item */
+  active?: boolean;
+  /** Disables the SgdsSubnavItem */
+  disabled?: boolean;
+}
+
+// ── Subnav ─────────────────────────────────────────────────────────────
+
+interface SgdsSubnavProps extends SgdsBaseProps {
+  /** Used only for SSR to indicate the presence of the `actions` slot. */
+  hasActionsSlot?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── Switch ─────────────────────────────────────────────────────────────
+
+interface SgdsSwitchProps extends SgdsBaseProps {
+  /** The size of the switch. By default, it is small size */
+  size?: "sm" | "md" | "lg";
+  /** When enabled, icon appears in the switch */
+  icon?: boolean;
+  /** Draws the switch in a checked state. */
+  checked?: boolean;
+  /** Disables the switch (so the user can't check / uncheck it). */
+  disabled?: boolean;
+  /** Used only for SSR to indicate the presence of the `default` slot. */
+  hasDefaultSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `leftLabel` slot. */
+  hasLeftLabelSlot?: boolean;
+  "onsgds-change"?: (event: CustomEvent<ISgdsSwitchChangeEventDetail>) => void;
+}
+
+// ── SystemBannerItem ─────────────────────────────────────────────────────────────
+
+interface SgdsSystemBannerItemProps extends SgdsBaseProps {
+  /** Used only for SSR to indicate the presence of the `action` slot. */
+  hasActionSlot?: boolean;
+  /** Disables the action link that appears when text content is clamped */
+  noClampAction?: boolean;
+  "onsgds-show-more"?: SgdsEventHandler;
+}
+
+// ── SystemBanner ─────────────────────────────────────────────────────────────
+
+interface SgdsSystemBannerProps extends SgdsBaseProps {
+  /** Controls the appearance of the alert */
+  show?: boolean;
+  /** Enables a close button that allows the user to dismiss the alert. */
+  dismissible?: boolean;
+  /** Disables the action link that appears when text content is clamped */
+  noClampAction?: boolean;
+  /** When true, removes max-width constraint to allow content to stretch full screen width */
+  fluid?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+}
+
+// ── TabGroup ─────────────────────────────────────────────────────────────
+
+interface SgdsTabGroupProps extends SgdsBaseProps {
+  /** The variant of tabs. Controls the visual styles of all `sgds-tabs` in its slot. It also sets the variant atttribute of `sgds-tab` */
+  variant?: "underlined" | "solid";
+  /** The orientation of tabs. Controls the orientation of all `sgds-tabs` in its slot. It also sets the orientation attribute of `sgds-tab` */
+  orientation?: "horizontal" | "vertical";
+  /** 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;
+  "onsgds-tab-hide"?: SgdsEventHandler;
+}
+
+// ── TabPanel ─────────────────────────────────────────────────────────────
+
+interface SgdsTabPanelProps extends SgdsBaseProps {
+  /** The tab panel's name. */
+  name?: string;
+  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */
+  active?: boolean;
+}
+
+// ── Tab ─────────────────────────────────────────────────────────────
+
+interface SgdsTabProps extends SgdsBaseProps {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: string;
+  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */
+  active?: boolean;
+  /** When true, sets tab to disabled state */
+  disabled?: boolean;
+}
+
+// ── TableCell ─────────────────────────────────────────────────────────────
+
+interface SgdsTableCellProps extends SgdsBaseProps {
+}
+
+// ── TableHead ─────────────────────────────────────────────────────────────
+
+interface SgdsTableHeadProps extends SgdsBaseProps {
+}
+
+// ── TableRow ─────────────────────────────────────────────────────────────
+
+interface SgdsTableRowProps extends SgdsBaseProps {
+}
+
+// ── Table ─────────────────────────────────────────────────────────────
+
+interface SgdsTableProps extends SgdsBaseProps {
+  /** Specifies the responsive breakpoint for the table.
+Use "sm", "md", "lg", or "xl" to create responsive tables up to a particular breakpoint.
+From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use "always" to make the table always responsive.
+
+(@deprecated) Deprecated since 3.9.0 legacy from v2 */
+  responsive?: "sm" | "md" | "lg" | "xl" | "always";
+  /** Array of strings to populate row header cells. */
+  rowHeader?: string[];
+  /** Array of strings to populate column header cells.
+Only used when `headerPosition` is set to "vertical" or "both". */
+  columnHeader?: string[];
+  /** Two-dimensional array of strings or numbers to populate table data cells. */
+  tableData?: Array<(string | number)[]>;
+  /** Defines the placement of headers in the table.
+Use "horizontal" for top headers only, "vertical" for left headers only,
+or "both" for both row and column headers. */
+  headerPosition?: "horizontal" | "vertical" | "both";
+  /** Enables background styling on horizontal header rows.
+When true, applies background color to header cells for better visual distinction. */
+  headerBackground?: boolean;
+  /** Enables borders around table cells.
+When true, displays visible borders between all table cells. */
+  tableBorder?: boolean;
+}
+
+// ── TableOfContents ─────────────────────────────────────────────────────────────
+
+interface SgdsTableOfContentsProps extends SgdsBaseProps {
+}
+
+// ── Textarea ─────────────────────────────────────────────────────────────
+
+interface SgdsTextareaProps extends SgdsBaseProps {
+  /** The textarea's name attribute */
+  name?: string;
+  /** The textarea's value attribute. */
+  value?: string;
+  /** Sets the minimum length of the textarea */
+  minlength?: number;
+  /** Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input */
+  maxlength?: number;
+  /** Enables spell checking on the textarea */
+  spellcheck?: boolean;
+  /** The number of rows to display by default. */
+  rows?: number;
+  /** The textarea's placeholder text. */
+  placeholder?: string;
+  /** Custom feedback text for error state when validated */
+  invalidFeedback?: string;
+  /** Autofocus the textarea */
+  autofocus?: boolean;
+  /** Makes the textarea readonly. */
+  readonly?: boolean;
+  /** Controls how the textarea can be resized. */
+  resize?: "none" | "vertical" | "auto";
+  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */
+  inputmode?: | "none"
+    | "text"
+    | "decimal"
+    | "numeric"
+    | "tel"
+    | "search"
+    | "email"
+    | "url";
+  /** The native textarea's autocorrect attribute. */
+  autocorrect?: boolean;
+  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+  hasFeedback?: boolean;
+  /** Makes the textarea as a required field. */
+  required?: boolean;
+  /** Disables native and sgds validation for the textarea. */
+  noValidate?: boolean;
+  /** The textarea's hint text */
+  hintText?: string;
+  /** Returns the ValidityState object */
+  validity?: ValidityState;
+  /** Returns the validation message based on the ValidityState */
+  validationMessage?: unknown;
+  /** The input's label */
+  label?: string;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+  invalid?: boolean;
+  "onsgds-change"?: SgdsEventHandler;
+  "onsgds-input"?: SgdsEventHandler;
+  "onsgds-focus"?: SgdsEventHandler;
+  "onsgds-blur"?: SgdsEventHandler;
+}
+
+// ── ThumbnailCard ─────────────────────────────────────────────────────────────
+
+interface SgdsThumbnailCardProps extends SgdsBaseProps {
+  /** Removes the card's internal padding when set to true. */
+  noPadding?: 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;
+}
+
+// ── ToastContainer ─────────────────────────────────────────────────────────────
+
+interface SgdsToastContainerProps extends SgdsBaseProps {
+  /** Controls the position of `sgds-toast` within itself.
+Since 3.7.1, the positions "top-start", "middle-start", "middle-center", and "middle-end" are deprecated. */
+  position?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
+}
+
+// ── Toast ─────────────────────────────────────────────────────────────
+
+interface SgdsToastProps extends SgdsBaseProps {
+  /** Controls the appearance of toast */
+  show?: boolean;
+  /** The header title of toast. It is required to assign a title to toast */
+  title?: string;
+  /** Controls whether the toast has fade animation during its appearance/disappearance */
+  noAnimation?: boolean;
+  /** Controls if the toast will hide itself after the delay time. Works with delay property */
+  autohide?: boolean;
+  /** The amount of time taken in miliseconds for toast to disappear after its first render. It takes effect only when autohide is set to true. Defaults to 5000ms */
+  delay?: number;
+  /** The variant styles of toast */
+  variant?: "success" | "warning" | "danger" | "info";
+  /** Controls whether or not the Toast is dismissible */
+  dismissible?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ── Tooltip ─────────────────────────────────────────────────────────────
+
+interface SgdsTooltipProps extends SgdsBaseProps {
+  /** The tooltip's content. Must be text */
+  content?: string;
+  /** The placement of tooltip relative to its target */
+  placement?: "top" | "bottom" | "left" | "right";
+  /** 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;
+  "onsgds-after-show"?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+}
+
+// ---------------------------------------------------------------------------
+// React JSX intrinsic element registrations
+// ---------------------------------------------------------------------------
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "sgds-accordion-item": SgdsAccordionItemProps;
+      "sgds-accordion": SgdsAccordionProps;
+      "sgds-alert-link": SgdsAlertLinkProps;
+      "sgds-alert": SgdsAlertProps;
+      "sgds-badge": SgdsBadgeProps;
+      "sgds-breadcrumb-item": SgdsBreadcrumbItemProps;
+      "sgds-breadcrumb": SgdsBreadcrumbProps;
+      "sgds-button": SgdsButtonProps;
+      "sgds-card": SgdsCardProps;
+      "sgds-checkbox-group": SgdsCheckboxGroupProps;
+      "sgds-checkbox": SgdsCheckboxProps;
+      "sgds-close-button": SgdsCloseButtonProps;
+      "sgds-combo-box-option": SgdsComboBoxOptionProps;
+      "sgds-combo-box": SgdsComboBoxProps;
+      "sgds-datepicker": SgdsDatepickerProps;
+      "sgds-description-list-group": SgdsDescriptionListGroupProps;
+      "sgds-description-list": SgdsDescriptionListProps;
+      "sgds-divider": SgdsDividerProps;
+      "sgds-drawer": SgdsDrawerProps;
+      "sgds-dropdown-item": SgdsDropdownItemProps;
+      "sgds-dropdown": SgdsDropdownProps;
+      "sgds-file-upload": SgdsFileUploadProps;
+      "sgds-footer-item": SgdsFooterItemProps;
+      "sgds-footer": SgdsFooterProps;
+      "sgds-icon": SgdsIconProps;
+      "sgds-icon-button": SgdsIconButtonProps;
+      "sgds-icon-card": SgdsIconCardProps;
+      "sgds-icon-list": SgdsIconListProps;
+      "sgds-image-card": SgdsImageCardProps;
+      "sgds-input": SgdsInputProps;
+      "sgds-link": SgdsLinkProps;
+      "sgds-mainnav-dropdown": SgdsMainnavDropdownProps;
+      "sgds-mainnav-item": SgdsMainnavItemProps;
+      "sgds-mainnav": SgdsMainnavProps;
+      "sgds-masthead": SgdsMastheadProps;
+      "sgds-modal": SgdsModalProps;
+      "sgds-overflow-menu": SgdsOverflowMenuProps;
+      "sgds-pagination": SgdsPaginationProps;
+      "sgds-progress-bar": SgdsProgressBarProps;
+      "sgds-quantity-toggle": SgdsQuantityToggleProps;
+      "sgds-radio-group": SgdsRadioGroupProps;
+      "sgds-radio": SgdsRadioProps;
+      "sgds-select-option": SgdsSelectOptionProps;
+      "sgds-select": SgdsSelectProps;
+      "sgds-sidebar-group": SgdsSidebarGroupProps;
+      "sgds-sidebar-item": SgdsSidebarItemProps;
+      "sgds-sidebar-section": SgdsSidebarSectionProps;
+      "sgds-sidebar": SgdsSidebarProps;
+      "sgds-sidenav-item": SgdsSidenavItemProps;
+      "sgds-sidenav-link": SgdsSidenavLinkProps;
+      "sgds-sidenav": SgdsSidenavProps;
+      "sgds-skeleton": SgdsSkeletonProps;
+      "sgds-spinner": SgdsSpinnerProps;
+      "sgds-stepper": SgdsStepperProps;
+      "sgds-subnav-item": SgdsSubnavItemProps;
+      "sgds-subnav": SgdsSubnavProps;
+      "sgds-switch": SgdsSwitchProps;
+      "sgds-system-banner-item": SgdsSystemBannerItemProps;
+      "sgds-system-banner": SgdsSystemBannerProps;
+      "sgds-tab-group": SgdsTabGroupProps;
+      "sgds-tab-panel": SgdsTabPanelProps;
+      "sgds-tab": SgdsTabProps;
+      "sgds-table-cell": SgdsTableCellProps;
+      "sgds-table-head": SgdsTableHeadProps;
+      "sgds-table-row": SgdsTableRowProps;
+      "sgds-table": SgdsTableProps;
+      "sgds-table-of-contents": SgdsTableOfContentsProps;
+      "sgds-textarea": SgdsTextareaProps;
+      "sgds-thumbnail-card": SgdsThumbnailCardProps;
+      "sgds-toast-container": SgdsToastContainerProps;
+      "sgds-toast": SgdsToastProps;
+      "sgds-tooltip": SgdsTooltipProps;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Global HTMLElementTagNameMap augmentation (vanilla TypeScript / non-React)
+// ---------------------------------------------------------------------------
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sgds-accordion-item": HTMLElement;
+    "sgds-accordion": HTMLElement;
+    "sgds-alert-link": HTMLElement;
+    "sgds-alert": HTMLElement;
+    "sgds-badge": HTMLElement;
+    "sgds-breadcrumb-item": HTMLElement;
+    "sgds-breadcrumb": HTMLElement;
+    "sgds-button": 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-description-list-group": HTMLElement;
+    "sgds-description-list": HTMLElement;
+    "sgds-divider": HTMLElement;
+    "sgds-drawer": HTMLElement;
+    "sgds-dropdown-item": HTMLElement;
+    "sgds-dropdown": HTMLElement;
+    "sgds-file-upload": HTMLElement;
+    "sgds-footer-item": HTMLElement;
+    "sgds-footer": HTMLElement;
+    "sgds-icon": HTMLElement;
+    "sgds-icon-button": HTMLElement;
+    "sgds-icon-card": HTMLElement;
+    "sgds-icon-list": HTMLElement;
+    "sgds-image-card": HTMLElement;
+    "sgds-input": HTMLElement;
+    "sgds-link": HTMLElement;
+    "sgds-mainnav-dropdown": HTMLElement;
+    "sgds-mainnav-item": HTMLElement;
+    "sgds-mainnav": HTMLElement;
+    "sgds-masthead": HTMLElement;
+    "sgds-modal": HTMLElement;
+    "sgds-overflow-menu": HTMLElement;
+    "sgds-pagination": HTMLElement;
+    "sgds-progress-bar": HTMLElement;
+    "sgds-quantity-toggle": HTMLElement;
+    "sgds-radio-group": HTMLElement;
+    "sgds-radio": HTMLElement;
+    "sgds-select-option": HTMLElement;
+    "sgds-select": HTMLElement;
+    "sgds-sidebar-group": HTMLElement;
+    "sgds-sidebar-item": HTMLElement;
+    "sgds-sidebar-section": HTMLElement;
+    "sgds-sidebar": HTMLElement;
+    "sgds-sidenav-item": HTMLElement;
+    "sgds-sidenav-link": HTMLElement;
+    "sgds-sidenav": HTMLElement;
+    "sgds-skeleton": HTMLElement;
+    "sgds-spinner": HTMLElement;
+    "sgds-stepper": HTMLElement;
+    "sgds-subnav-item": HTMLElement;
+    "sgds-subnav": HTMLElement;
+    "sgds-switch": HTMLElement;
+    "sgds-system-banner-item": HTMLElement;
+    "sgds-system-banner": HTMLElement;
+    "sgds-tab-group": HTMLElement;
+    "sgds-tab-panel": HTMLElement;
+    "sgds-tab": HTMLElement;
+    "sgds-table-cell": HTMLElement;
+    "sgds-table-head": HTMLElement;
+    "sgds-table-row": HTMLElement;
+    "sgds-table": HTMLElement;
+    "sgds-table-of-contents": HTMLElement;
+    "sgds-textarea": HTMLElement;
+    "sgds-thumbnail-card": HTMLElement;
+    "sgds-toast-container": HTMLElement;
+    "sgds-toast": HTMLElement;
+    "sgds-tooltip": HTMLElement;
+  }
+}