/**
 * 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
// ---------------------------------------------------------------------------

export type SgdsEventHandler = (event: CustomEvent) => void;

/** Common props shared by every SGDS element */
export 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 ISgdsFileUploadAddFilesEventDetail = FileList;
type ISgdsFileUploadChangeEventDetail = FileList;
type ISgdsFileUploadFilesSelectedEventDetail = FileList;
interface ISgdsFileUploadRemoveFileEventDetail {
    file: File;
    files: FileList;
}

// ── Pagination ─────────────────────────────────────────────────────────────

interface ISgdsPaginationPageChangeEventDetail {
    currentPage: number;
}

// ── Radio ─────────────────────────────────────────────────────────────

interface ISgdsRadioGroupChangeEventDetail {
    value: string;
}

// ── Stepper ─────────────────────────────────────────────────────────────

interface IStepMetaData {
    component: unknown;
    stepHeader: string;
    iconName?: string;
    isCompleted?: boolean;
}

// ── Switch ─────────────────────────────────────────────────────────────

interface ISgdsSwitchChangeEventDetail {
    checked: boolean;
}

// ---------------------------------------------------------------------------
// Component prop interfaces
// ---------------------------------------------------------------------------

// ── AccordionItem ─────────────────────────────────────────────────────────────

export 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;
  /** The aria-label attribute forwarded to the accordion item button. */
  ariaLabel?: string;
  "onsgds-show"?: SgdsEventHandler;
  "onsgds-after-show"?: SgdsEventHandler;
  "onsgds-hide"?: SgdsEventHandler;
  "onsgds-after-hide"?: SgdsEventHandler;
}

// ── Accordion ─────────────────────────────────────────────────────────────

export 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" | "spacious";
}

// ── AlertLink ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

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;
}

// ── BreadcrumbItem ─────────────────────────────────────────────────────────────

export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
  active?: boolean;
}

// ── Breadcrumb ─────────────────────────────────────────────────────────────

export interface SgdsBreadcrumbProps extends SgdsBaseProps {
  /** The aria-label of nav element within breadcrumb component. */
  ariaLabel?: string;
}

// ── Button ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export interface SgdsCardProps extends SgdsBaseProps {
  /** Sets the image position of the card. Available options: `before`, `after` */
  imagePosition?: CardImagePosition;
  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
  imageAdjustment?: CardImageAdjustment;
  /** Used only for SSR to indicate the presence of the `image` slot. */
  hasImageSlot?: boolean;
  /** Used only for SSR to indicate the presence of the `icon` slot. */
  hasIconSlot?: boolean;
  /** Used only for SSR to indicate the presence of the `upper` slot. */
  hasUpperSlot?: boolean;
  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
  stretchedLink?: boolean;
  /** Disables the card */
  disabled?: boolean;
  /** When true, hides the default border of the card. */
  hideBorder?: boolean;
  /** When true, applies a tinted background color to the card. */
  tinted?: boolean;
  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
  orientation?: CardOrientation;
}

// ── CheckboxGroup ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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";
  /** Disables the close button, preventing click events */
  disabled?: boolean;
}

// ── ComboBoxOption ─────────────────────────────────────────────────────────────

export interface SgdsComboBoxOptionProps extends SgdsBaseProps {
  /** Disables the Item */
  disabled?: boolean;
  /** The value of the option item */
  value?: string;
}

// ── ComboBox ─────────────────────────────────────────────────────────────

export 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;
  /** Disables native and sgds validation for the combo box. */
  noValidate?: 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-invalid"?: SgdsEventHandler;
  "onsgds-valid"?: SgdsEventHandler;
  "onsgds-show"?: SgdsEventHandler;
  "onsgds-after-show"?: SgdsEventHandler;
  "onsgds-hide"?: SgdsEventHandler;
  "onsgds-after-hide"?: SgdsEventHandler;
}

// ── Datepicker ─────────────────────────────────────────────────────────────

export 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;
  /** Disables native and sgds validation for the datepicker. */
  noValidate?: 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;
  /** Marks the component as invalid. Replace the pseudo :invalid selector. */
  invalid?: boolean;
  /** 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-invalid"?: SgdsEventHandler;
  "onsgds-valid"?: SgdsEventHandler;
  "onsgds-show"?: SgdsEventHandler;
  "onsgds-after-show"?: SgdsEventHandler;
  "onsgds-hide"?: SgdsEventHandler;
  "onsgds-after-hide"?: SgdsEventHandler;
}

// ── DescriptionListGroup ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export interface SgdsDividerProps extends SgdsBaseProps {
  /** Sets the orientation of divider to vertical. Defaults to horizontal */
  orientation?: "horizontal" | "vertical";
  /** Sets the orientation of divider to vertical. Defaults to false */
  thickness?: "thin" | "thick" | "thicker";
}

// ── Drawer ─────────────────────────────────────────────────────────────

export interface SgdsDrawerProps extends SgdsBaseProps {
  /** 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";
  /** The accessible label for the drawer dialog. This is required for assistive technology. */
  ariaLabel?: string;
  /** 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 ─────────────────────────────────────────────────────────────

export interface SgdsDropdownItemProps extends SgdsBaseProps {
  /** when true, sets the active stylings of dropdown item */
  active?: boolean;
  /** Disables the SgdsMainnavItem */
  disabled?: boolean;
}

// ── Dropdown ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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;
  /** Variant of the file upload component: "default" or "drag-and-drop" */
  variant?: "default" | "drag-and-drop";
  /** An accessible label for the file upload button. Defaults to "Choose files" if not set. */
  ariaLabel?: string;
  /** Disables native and sgds validation for the component. Use this when you want to do custom validation */
  noValidate?: 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;
  "onsgds-add-files"?: (event: CustomEvent<ISgdsFileUploadAddFilesEventDetail>) => void;
  "onsgds-remove-file"?: (event: CustomEvent<ISgdsFileUploadRemoveFileEventDetail>) => void;
  "onsgds-change"?: (event: CustomEvent<ISgdsFileUploadChangeEventDetail>) => void;
}

// ── FooterItem ─────────────────────────────────────────────────────────────

export interface SgdsFooterItemProps extends SgdsBaseProps {
  /** Sets the color tone of the footer item. Inherited from the parent sgds-footer. */
  tone?: "fixed-dark" | "neutral";
}

// ── Footer ─────────────────────────────────────────────────────────────

export 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;
  /** Sets the layout context of the footer. Use "sidebar" when the footer is alongside a collapsible or persistent sidebar. Overlay sidebars should use "default". */
  layout?: "default" | "sidebar";
  /** Sets the color tone of the footer. Use "neutral" for light backgrounds (e.g. sidebar layouts). */
  tone?: "fixed-dark" | "neutral";
  /** 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 ─────────────────────────────────────────────────────────────

export 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";
  /** An accessible label for the icon. When set, the SVG is treated as informative. When omitted, the SVG is marked as decorative with aria-hidden="true". */
  ariaLabel?: string;
}

// ── IconButton ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export interface SgdsMainnavItemProps extends SgdsBaseProps {
  /** when true, sets the active stylings of the navigation item */
  active?: boolean;
  /** Disables the SgdsMainnavItem */
  disabled?: boolean;
}

// ── Mainnav ─────────────────────────────────────────────────────────────

export interface SgdsMainnavProps extends SgdsBaseProps {
  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
  hasNonCollapsibleSlot?: boolean;
  /** 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 ─────────────────────────────────────────────────────────────

export interface SgdsMastheadProps extends SgdsBaseProps {
  /** When true, removes max-width constraint to allow content to stretch full screen width */
  fluid?: boolean;
}

// ── Modal ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export interface SgdsOverflowMenuProps extends SgdsBaseProps {
  /** Specifies a large or small button */
  size?: "sm" | "md";
}

// ── Pagination ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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;
  arialabel?: string;
  /** Add label on top of progress bar */
  label?: string;
}

// ── QuantityToggle ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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;
  /** Automatically focuses the selected radio input in the group when it becomes checked. */
  autofocus?: 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 ─────────────────────────────────────────────────────────────

export 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;
  /** Automatically focuses the radio input when it becomes checked. */
  autofocus?: boolean;
  "onsgds-focus"?: SgdsEventHandler;
  "onsgds-blur"?: SgdsEventHandler;
}

// ── SelectOption ─────────────────────────────────────────────────────────────

export interface SgdsSelectOptionProps extends SgdsBaseProps {
  /** Disables the Item */
  disabled?: boolean;
  /** The value of the option item */
  value?: string;
}

// ── Select ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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;
  /** When true, renders a divider below the section content to visually separate it from the next section. */
  separator?: 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 ─────────────────────────────────────────────────────────────

export interface SgdsSidebarProps extends SgdsBaseProps {
  /** Controls whether the sidebar is collapsed or expanded to save screen space.
When true, sidebar displays icon-only mode for root items. When false, full labels and content are shown.
On mobile devices (width <= 576px), this is automatically toggled based on screen size.
Collapsing propagates to child items, affecting label visibility and spacing. */
  collapsed?: boolean;
  /** The name of the currently active sidebar item or group for programmatic control.
Setting this property programmatically selects the item with the matching `name` attribute.
Automatically expands parent groups to reveal nested items and syncs the active state throughout the hierarchy.
Clearing this property (setting to empty string) deselects all items. */
  active?: string;
  /** Shows a scrim/overlay background behind the drawer or sidebar in overlay mode.
When true, displays a semi-transparent dark overlay behind the drawer to focus user attention.
Only visible when drawer is open or in overlay mode with sidebar not collapsed. */
  scrim?: boolean;
  /** Controls the sidebar's collapse behaviour.
- `"collapsible"` (default): shows a toggle button that collapses/expands the sidebar.
- `"persistent"`: sidebar is always visible and cannot be collapsed.
- `"overlay"`: sidebar slides over the content as a drawer on smaller viewports. */
  variant?: "collapsible" | "persistent" | "overlay";
  /** Accessible label for the sidebar navigation landmark.
Passed to the `<nav>` element's `aria-label` attribute so screen readers can distinguish
this sidebar from other navigation regions on the page (e.g. a top mainnav).
Override when your page uses a more specific term (e.g. `"Dashboard navigation"`). */
  ariaLabel?: string;
}

// ── SidenavItem ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export interface SgdsSidenavLinkProps extends SgdsBaseProps {
  /** when true, sets the active stylings of .nav-link */
  active?: boolean;
  /** Disables the SgdsMainnavItem */
  disabled?: boolean;
}

// ── Sidenav ─────────────────────────────────────────────────────────────

export interface SgdsSidenavProps extends SgdsBaseProps {
  /** Apply position sticky to the sidenav */
  sticky?: boolean;
}

// ── Skeleton ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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";
}

// ── Step ─────────────────────────────────────────────────────────────

export interface SgdsStepProps extends SgdsBaseProps {
  /** The header text for the step */
  stepHeader?: string;
  /** Optional icon name to display instead of step number */
  iconName?: string | undefined;
  /** Optional component reference associated with this step. Retrievable via `sgds-stepper.getComponent()`. */
  component?: unknown;
  /** Whether this step is clickable */
  clickable?: boolean;
  /** Whether this step is currently active */
  active?: boolean;
  /** Whether this step is currently disabled */
  disabled?: boolean;
  /** Whether this step is completed */
  completed?: boolean;
}

// ── Stepper ─────────────────────────────────────────────────────────────

export interface SgdsStepperProps extends SgdsBaseProps {
  /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead. */
  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;
  /** When true, the stepper's steps can only be clicked in a linear manner */
  linear?: boolean;
  "onsgds-next-step"?: SgdsEventHandler;
  "onsgds-previous-step"?: SgdsEventHandler;
  "onsgds-last-step"?: SgdsEventHandler;
  "onsgds-first-step"?: SgdsEventHandler;
  "onsgds-arrived"?: SgdsEventHandler;
  "onsgds-reset"?: SgdsEventHandler;
}

// ── SubnavItem ─────────────────────────────────────────────────────────────

export interface SgdsSubnavItemProps extends SgdsBaseProps {
  /** when true, sets the active stylings of the navigation item */
  active?: boolean;
  /** Disables the SgdsSubnavItem */
  disabled?: boolean;
}

// ── Subnav ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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;
  /** An accessible label for the tab. Use this when the tab's text content does not adequately describe its purpose. */
  ariaLabel?: string;
}

// ── TableCell ─────────────────────────────────────────────────────────────

export interface SgdsTableCellProps extends SgdsBaseProps {
}

// ── TableHead ─────────────────────────────────────────────────────────────

export interface SgdsTableHeadProps extends SgdsBaseProps {
}

// ── TableRow ─────────────────────────────────────────────────────────────

export interface SgdsTableRowProps extends SgdsBaseProps {
}

// ── Table ─────────────────────────────────────────────────────────────

export 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;
  /** Controls the CSS `table-layout` algorithm.
Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content. */
  layout?: "auto" | "fixed";
}

// ── TableOfContents ─────────────────────────────────────────────────────────────

export interface SgdsTableOfContentsProps extends SgdsBaseProps {
}

// ── Textarea ─────────────────────────────────────────────────────────────

export 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;
  "onsgds-invalid"?: SgdsEventHandler;
  "onsgds-valid"?: SgdsEventHandler;
}

// ── ThumbnailCard ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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 ─────────────────────────────────────────────────────────────

export 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-step": SgdsStepProps;
      "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-step": 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;
  }
}
