import React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      /**
        * The page header displays the title and any additional metadata and navigation.
        * @example How to use it
        * ```html
        * <tds-page-header>
        * <h1>Title</h1>
        * 
        * <div slot="actions">
        * <button>Button</button>
        * </div>
        * </tds-page-header>
        * ```
        * @slot - The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
        * @slot actions - Additional content (typically actions) that complements the primary slot.
        * @slot navigation - For page header with navigation, this slot is for the nav.
        * @cssprop --tds-page-header-background-color - Background color of the header.
        * @cssprop --tds-page-header-background-color-inactive - Background color of inactive headers.
        * @cssprop --tds-page-header-color - Color of any meta text.
        * @cssprop --tds-page-header-headline-color - Color of the page header h1.
        * @cssprop --tds-page-header-padding-x - Horizontal padding of the header.
        * @cssprop --tds-page-header-padding-y - Vertical padding of the header.
        * @cssprop --tds-page-header-nav-gap - Gap between the navigation items.
        * @cssprop --tds-page-header-nav-background - Background color of the navigation, gradient on mobile. Overrides are not recommended.
        * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
        * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color)} - Text color for the tab.
        * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
        * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
        * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color)} - Border bottom color for the tab.
        * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
        * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
        * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
        * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
        * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-disabled)} - Text color for the tab on disabled.
        * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
        * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color)} - Text color for the tab on selected.
        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color)} - Border color for the tab on selected.
        * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
        * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning)} - Color for the indicator.
        */
      "tds-page-header": {
        /**
         * Indicates whether the page header is inactive or not.
         * When set to true, the page header is visually inactive
         * @prop {boolean} inactive - Controls the inactive state of the page. Defaults to false.
         */
        "inactive"?: boolean
        /**
         * Indicates whether the page header is a profile page header or not.
         * When set to true, the page header will visually center the title and actions at mobile breakpoints.
         */
        "profile"?: boolean
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * 
        */
      "tds-page-header-nav": {
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * 
        * @slot - Default slot for placing content inside the popovercontainer.
        */
      "tds-popover-container": {
        /**
         * Automatically position the popover above or below the trigger element based on the available space.
         * The area beneath the trigger element is given a 48px bias towards positioning below.
         */
        "autoPosition"?: boolean
        /**
         * The breakpoint at which the popover will convert to a static element. If left blank, it will always be a popover.
         */
        "breakpoint"?: number
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * The sidenav lets users navigate through subsets of data pertaining to a resource.
It can be used in addition to the page header navigation, as secondary navigation.

The expected structure of a `tds-sidenav` is:
`<tds-sidenav> > <tds-sidenav-section> > <tds-sidenav-item>`
If more depth is needed, the `tds-sidenav-item` can have a `subnav` slot that nests a `tds-sidenav-section`.
`<tds-sidenav> > <tds-sidenav-section> > <tds-sidenav-item> > <button> + <tds-sidenav-section slot="subnav"> > <tds-sidenav-item> `

Please refer to each component's documentation for more information on how to use them.
        * @slot - The default slot used to nest`tds-sidenav-section` components.
        * @cssprop --tds-sidenav-item-background - Background color for item (default: transparent)
        * @cssprop --tds-sidenav-item-background-hover - Background color for hover state (default: var(--t-fill-color-neutral-080))
        * @cssprop --tds-sidenav-item-background-active - Background color for active state (default: var(--t-fill-color-neutral-070))
        * @cssprop --tds-sidenav-item-background-selected - Background color for selected state (default: var(--t-fill-color-neutral-050))
        * @cssprop --tds-sidenav-item-nested-border-color - Border color for nested items (default: var(--t-fill-color-neutral-050))
        * @cssprop --tds-sidenav-item-nested-border-color-hover - Border color for nested items in hover state (default: var(--t-fill-color-neutral-010))
        * @cssprop --tds-sidenav-item-nested-border-color-selected - Border color for nested items in selected state (default: var(--t-fill-color-neutral-010))
        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-secondary))
        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color))
        * @cssprop --tds-sidenav-indent - Internal: The indentation spacing for nested items (default: 12px)
        * @cssprop --tds-sidenav-item-depth - Internal: The current nesting depth of items (default: 0)
        * @cssprop --tds-sidenav-item-transition - Internal: The transition timing for item state changes (default: background-color .2s cubic-bezier(.19, .91, .38, 1))
        */
      "tds-sidenav": {
        /**
         * The label for the sidenav, used for accessibility.
         */
        "label"?: string
        /**
         * The id of the popover.
         */
        "popoverId"?: string
        /**
         * The label for the `tds-sidenav-responsive-header`, corresponds to the selected item in the sidenav.
         */
        "selectedItemLabel"?: string
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * The `tds-sidenav-item` component is used to display a single item in the sidenav.
The slotted content should be a link or button without any classes or styles applied.
        * @example ```html
        * <tds-sidenav-item>
        *  <a href="#">Home</a>
        * </tds-sidenav-item>
        * 
        * <tds-sidenav-item>
        *  <button>Foo</button>
        *   <tds-sidenav-section slot="subnav">
        *     <tds-sidenav-item><a href="#">Nested Link</a></tds-sidenav-item>
        *   </tds-sidenav-section>
        * </tds-sidenav-item>
        * ```
        * @slot - The default slot is used to display the sidenav item link or button.
        * @slot subnav - The subnav slot is used to display a nested subnav menu. The slotted content should be a `tds-sidenav-section` component.
        */
      "tds-sidenav-item": {
        /**
         * Whether the sidenav item is selected.
         */
        "selected"?: boolean
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * UNSTABLE: This component is currently in development and subject to change.
Provides a collapsible sidenav item.
        * @slot prefix - The prefix slot is used to display an icon or other content before the label.
        * @slot suffix - The suffix slot is used to display an icon or other content after the label.
        * @slot subnav - The subnav slot is used to display a nested subnav menu. Should be a `tds-sidenav-section` component.
        */
      "tds-sidenav-item-collapsible": {
        /**
         * Indicates whether the sidenav item is collapsed or not.
         */
        "collapsed"?: boolean
        /**
         * The label of the sidenav item.
         */
        "label"?: string
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * Provides a toggle to display the sidenav popover and current item for the sidenav on smaller viewports.

It is included inside `tds-sidenav` and is not intended to be used as a standalone component.
        */
      "tds-sidenav-responsive-header": {
        /**
         * The label for the sidenav header
         */
        "label"?: string
        /**
         * The id of the popover.
         */
        "popoverId"?: string
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
      /**
        * The `tds-sidenav-section` component is used to display a section of the sidenav.
All `tds-sidenav-item` components should be nested within a `tds-sidenav-section`.

If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.
        * @slot - The default slot is used to nest `tds-sidenav-item` components.
        */
      "tds-sidenav-section": {
        /**
         * The label for the section.
         */
        "label"?: string
        "class"?: string
      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
    }
  }
}