/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { IconNames } from "./types/Icons"; import { TextAlign } from "./components/table/table/table"; import { Placement } from "@popperjs/core"; import { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-menu/side-menu"; import { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu"; import { InternalTdsStepperPropChange } from "./components/stepper/stepper"; import { InternalTdsTablePropChange } from "./components/table/table/table"; export { IconNames } from "./types/Icons"; export { TextAlign } from "./components/table/table/table"; export { Placement } from "@popperjs/core"; export { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-menu/side-menu"; export { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu"; export { InternalTdsStepperPropChange } from "./components/stepper/stepper"; export { InternalTdsTablePropChange } from "./components/table/table/table"; export namespace Components { interface TdsAccordion { /** * Removes the bottom border of the last Accordion item. * @default false */ "hideLastBorder": boolean; /** * Set the variant of the Accordion. * @default null */ "modeVariant": 'primary' | 'secondary' | null; } interface TdsAccordionItem { /** * Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6. * @default '6' */ "ariaLevelValue": '1' | '2' | '3' | '4' | '5' | '6'; /** * Method for collapsing the Accordion Item */ "collapse": () => Promise; /** * Disabled option in `boolean`. * @default false */ "disabled": boolean; /** * Method for expanding the Accordion Item */ "expand": () => Promise; /** * Changes position of the expand icon. * @default 'end' */ "expandIconPosition": 'start' | 'end'; /** * Set to true to expand panel open * @default false */ "expanded": boolean; /** * The header gives users the context about the additional information available inside the panel * @default '' */ "header": string; /** * Returns the expanded state of the Accordion Item. */ "isExpanded": () => Promise; /** * When true, 16px on right padding instead of 64px * @default false */ "paddingReset": boolean; /** * Method for toggling the expanded state of the Accordion Item. */ "toggleAccordionItem": () => Promise; } interface TdsBadge { /** * Changes visibility of Badge * @default false */ "hidden": boolean; /** * Sets component size. * @default 'lg' */ "size": 'lg' | 'sm'; /** * Defines aria-live attribute * @default 'polite' */ "tdsAriaLive": 'off' | 'polite' | 'assertive'; /** * Value shown in Badge * @default '' */ "value": string; } interface TdsBanner { /** * ID used for internal table functionality and events, must be unique. **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time. * @default generateUniqueId() */ "bannerId": string; /** * Header text. */ "header"?: string; /** * Hides the Banner * @default false */ "hidden": boolean; /** * Hides the Banner. */ "hideBanner": () => Promise; /** * Name of the icon for the component. For error and information variant, the icon is predefined. */ "icon"?: IconNames; /** * Defines the ARIA role of the banner. Defaults to "banner" for global use, but can be set to "region" or "alert" if used differently. * @default 'banner' */ "roleType": 'banner' | 'region' | 'alert'; /** * Shows the Banner */ "showBanner": () => Promise; /** * Subheader text. */ "subheader"?: string; /** * Variant of Banner * @default 'default' */ "variant": 'error' | 'information' | 'default'; } /** * @example *
Semantic section content
*
*/ interface TdsBlock { /** * Specifies the HTML tag to be used for the component wrapper. * @default 'div' */ "componentTag": | 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main'; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; } interface TdsBodyCell { /** * Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering */ "cellKey"?: string; /** * Value that will be presented as text inside a cell */ "cellValue"?: string | number; /** * Number of columns the cell should span. */ "colSpan"?: number; /** * Disables internal padding. Useful when passing other components to cell. * @default false */ "disablePadding": boolean; /** * Number of rows the cell should span. */ "rowSpan"?: number; /** * Setting for text align, default value "left". Other accepted values are "left", "start", "right", "end" or "center". */ "textAlign"?: TextAlign; } interface TdsBreadcrumb { /** * Boolean for the current link * @default false */ "current": boolean; } interface TdsBreadcrumbs { /** * The value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsButton { /** * Determines if and how the button should animate. * @default 'none' */ "animation": 'none' | 'fade'; /** * Control for disabled state of a component * @default false */ "disabled": boolean; /** * When enabled, the Button takes 100% width * @default false */ "fullbleed": boolean; /** * Set the mode variant of the Button. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * The name attribute allows for different ways of accessing the button element */ "name"?: string; /** * Size of a Button * @default 'lg' */ "size": 'xs' | 'sm' | 'md' | 'lg'; /** * The value to be used for the aria-label attribute if onlyIcon is set to true */ "tdsAriaLabel"?: string; /** * Text displayed inside the Button */ "text"?: string; /** * Button's type * @default 'button' */ "type": 'button' | 'submit' | 'reset'; /** * The value attribute can be used when handling a form submission */ "value"?: string; /** * Variation of Button's design * @default 'primary' */ "variant": 'primary' | 'secondary' | 'ghost' | 'danger'; } interface TdsCard { /** * Divider for the body * @default false */ "bodyDivider": boolean; /** * Body image src */ "bodyImg"?: string; /** * Alt text for the body image */ "bodyImgAlt"?: string; /** * ID for the Card, must be unique. **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card, as the default ID is random and will be different every time. * @default generateUniqueId() */ "cardId": string; /** * Makes the Card clickable. * @default false */ "clickable": boolean; /** * Enables expandable behaviour. When true, clicking the header toggles content visibility. * @default false */ "expandable": boolean; /** * Tracks the current expanded state when expandable is enabled. * @default false */ "expanded": boolean; /** * Text in the header */ "header"?: string; /** * Placement of the header * @default 'below-header' */ "imagePlacement": 'above-header' | 'below-header'; /** * Variant of the Card based on the theme used. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * @default false */ "stretch": boolean; /** * Subheader text in the header */ "subheader"?: string; } interface TdsCheckbox { /** * ID for the Checkbox's input element. Randomly generated if not specified. * @default generateUniqueId() */ "checkboxId": string; /** * Sets the Checkbox as checked * @default false */ "checked": boolean; /** * Sets the Checkbox in a disabled state * @default false */ "disabled": boolean; /** * Method to programmatically focus the checkbox element */ "focusElement": () => Promise; /** * Sets the Checkbox as indeterminate * @default false */ "indeterminate": boolean; /** * Name for the Checkbox's input element. */ "name"?: string; /** * Make the Checkbox required * @default false */ "required": boolean; /** * Value to be used for the aria-describedby attribute */ "tdsAriaDescribedby"?: string; /** * Value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Toggles the checked value of the component. */ "toggleCheckbox": () => Promise<{ checkboxId: string; checked: boolean; }>; /** * Value for the Checkbox */ "value"?: string; } interface TdsChip { /** * Controls component's checked attribute. Valid only for type checkbox and radio. * @default false */ "checked": boolean; /** * ID used for internal Chip functionality and events, must be unique. **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input, as the default ID is random and will be different every time. * @default generateUniqueId() */ "chipId": string; /** * Sets the Chip in a disabled state * @default false */ "disabled": boolean; /** * Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio. */ "name"?: string; /** * Size of the Chip component * @default 'lg' */ "size": 'sm' | 'lg'; /** * Value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Type of Chip, depends on usage * @default 'button' */ "type": 'button' | 'radio' | 'checkbox'; /** * Value of input. Valid only for type checkbox and radio. */ "value"?: string; } interface TdsCoreHeaderItem { } interface TdsDatetime { /** * Autofocus for input * @default false */ "autofocus": boolean; /** * Function for additional validation based on business rules */ "customValidator"?: (value: string) => boolean; /** * Default value of the component.
Format for date-time: yyyy-MM-ddTHH:mm.
Format for date: yyyy-MM-dd.
Format for month: yyyy-MM.
Format for week: yyyy-Www.
Format for time: HH:mm. * @default 'none' */ "defaultValue": string | 'none'; /** * Set input in disabled state * @default false */ "disabled": boolean; /** * Method to programmatically focus the datetime element */ "focusElement": () => Promise; /** * Default contextual helper text for the component for states = success or none * @default '' */ "helper": string; /** * Contextual helper text for the component for error state */ "helperError"?: string; /** * Contextual helper text for the component when input is invalid * @default 'Invalid input' */ "helperErrorInvalid"?: string; /** * Label text for the component * @default '' */ "label": string; /** * Position of the label * @default 'no-label' */ "labelPosition": 'inside' | 'outside' | 'no-label'; /** * Sets max value.
Example for different types:
datetime="2023-01-31T00:00"
date="2023-01-01"
month="2023-01"
week="2023-W02"
time="15:00" */ "max"?: string; /** * Sets min value.
Example for different types:
datetime="2023-01-31T00:00"
date="2023-01-01"
month="2023-01"
week="2023-W02"
time="15:00" */ "min"?: string; /** * Set the variant of the Datetime component. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Name property. Uses a unique ID as fallback if not specified. * @default `datetime-${generateUniqueId()}` */ "name": string; /** * Resets min width rule * @default false */ "noMinWidth": boolean; /** * Method that resets the value of the Datetime, using defaultValue if is not 'none' */ "reset": () => Promise; /** * Method that sets the value of the datetime element */ "setValue": (newValue: string) => Promise; /** * Size of the input * @default 'lg' */ "size": 'sm' | 'md' | 'lg'; /** * Switches between success and error state. */ "state"?: 'none' | 'success' | 'error'; /** * Value for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Sets an input type * @default 'datetime-local' */ "type": 'datetime-local' | 'date' | 'month' | 'week' | 'time'; /** * Value of the input text * @default '' */ "value": string; } interface TdsDivider { /** * Orientation of the Divider, horizontal if not specified. * @default 'horizontal' */ "orientation": 'horizontal' | 'vertical'; /** * Variant of the Divider, subtle if not specified. * @default 'subtle' */ "variant": 'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue'; } interface TdsDropdown { /** * @default 'slide' */ "animation": 'none' | 'slide'; "appendValue": (value: string) => Promise; /** * Method for closing the Dropdown. */ "close": () => Promise; /** * Default value selected in the Dropdown. */ "defaultValue"?: string | number; /** * Sets the Dropdown in a disabled state * @default false */ "disabled": boolean; /** * Sets the Dropdown in an error state * @default false */ "error": boolean; /** * Enables filtration in the Dropdown. * @default false */ "filter": boolean; /** * Method that forces focus on the input element. */ "focusElement": () => Promise; /** * Helper text for the Dropdown. */ "helper"?: string; /** * Label text for the Dropdown. */ "label"?: string; /** * Label text position */ "labelPosition"?: 'inside' | 'outside'; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Enables multiselect in the Dropdown. * @default false */ "multiselect": boolean; /** * Name for the Dropdowns input element. */ "name"?: string; /** * Text that is displayed if filter is used and there are no options that matches the search. Setting it to an empty string disables message from showing up. * @default 'No result' */ "noResultText"?: string; /** * Normalizes input text for fuzzier search * @default true */ "normalizeText": boolean; /** * The direction the Dropdown should open, auto if not specified. * @default 'auto' */ "openDirection": 'up' | 'down' | 'auto'; /** * Placeholder text for the Dropdown. */ "placeholder"?: string; "removeValue": (oldValue: string) => Promise; "reset": () => Promise; /** * Method for setting the selected value of the Dropdown. Single selection example: dropdown.setValue('option-1', 'Option 1'); Multiselect example: dropdown.setValue(['option-1', 'option-2']); */ "setValue": (value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number | undefined; label: string | undefined; }[]>; /** * The size of the Dropdown. * @default 'lg' */ "size": 'xs' | 'sm' | 'md' | 'lg'; /** * Defines aria-label attribute for input */ "tdsAriaLabel"?: string; /** * Method to force update the dropdown display value. Use this method when you programmatically change the text content of dropdown options to ensure the selected value display updates immediately. */ "updateDisplay": () => Promise; /** * Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. * @default null */ "value": string | number | (string | number)[] | null; } interface TdsDropdownOption { /** * Sets the option as disabled. * @default false */ "disabled": boolean; /** * Method to select/deselect an option. */ "setSelected": (selected: boolean) => Promise; /** * Defines aria-label attribute for the option */ "tdsAriaLabel"?: string; /** * Value of the dropdown option */ "value"?: string | number; } interface TdsFolderTab { /** * Disables the Tab. * @default false */ "disabled": boolean; "setSelected": (selected: boolean) => Promise; "setTabWidth": (width: number) => Promise; } interface TdsFolderTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex": number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Reinitializes the component. */ "reinitialize": () => Promise; /** * Sets the passed tabindex as the selected Tab. */ "selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel": string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel": string; } interface TdsFooter { /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; } interface TdsFooterGroup { /** * Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility. */ "tdsListAriaLabel"?: string; /** * Title text for the link group, only valid on top part of Footer. */ "titleText"?: string; } interface TdsFooterItem { } interface TdsHeader { } interface TdsHeaderBrandSymbol { } interface TdsHeaderCell { /** * The value of column key, usually comes from JSON, needed for sorting */ "cellKey"?: string; /** * Text that displays in column cell */ "cellValue"?: string; /** * Number of columns the cell should span. */ "colSpan"?: number; /** * In case noMinWidth is set, the user has to specify the width value for each column. */ "customWidth"?: string; /** * Disables internal padding. Useful when passing other components to cell. * @default false */ "disablePadding": boolean; /** * Number of rows the cell should span. */ "rowSpan"?: number; /** * Enables sorting on that column * @default false */ "sortable": boolean; /** * Aria label for the sort button, providing an accessible description * @default '' */ "tdsAriaLabelSortButton"?: string; /** * Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". * @default 'left' */ "textAlign": TextAlign; } interface TdsHeaderDropdown { /** * The label of the button that opens the dropdown. This is an alternative to the label slot. */ "label"?: string; /** * If the dropdown icon (downwards chevron) should be hidden. * @default false */ "noDropdownIcon": boolean; /** * If the button that opens the dropdown should appear selected. * @default false */ "selected": boolean; /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderDropdownList { /** * The size of the component. * @default 'md' */ "size": 'lg' | 'md'; } interface TdsHeaderDropdownListItem { /** * If the link should appear selected. * @default false */ "selected": boolean; /** * The size of the component. * @default 'md' */ "size": 'md' | 'lg'; } interface TdsHeaderDropdownListUser { /** * Header text, usually the users first name and last name. */ "header"?: string; /** * Image alt text. */ "imgAlt"?: string; /** * Image URL. */ "imgUrl"?: string; /** * Subheader text. */ "subheader"?: string; } interface TdsHeaderHamburger { /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderItem { /** * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active": boolean; /** * If the button should appear selected. * @default false */ "selected": boolean; } interface TdsHeaderLauncher { /** * Value to be used by the aria-label attribute of the launcher button */ "tdsAriaLabel"?: string; } interface TdsHeaderLauncherButton { /** * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active": boolean; /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderLauncherGrid { } interface TdsHeaderLauncherGridItem { } interface TdsHeaderLauncherGridTitle { } interface TdsHeaderLauncherList { } interface TdsHeaderLauncherListItem { } interface TdsHeaderLauncherListTitle { } interface TdsHeaderTitle { } interface TdsIcon { /** * Pass the name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library * @default 'truck' */ "name": IconNames; /** * Pass a size of icon as a string, for example, 32px, 1rem, 4em... * @default '16px' */ "size": string; /** * Set description for the svg. Also used by aria-describedby. */ "svgDescription"?: string; /** * Override the default title for the svg. Also used by aria-labelledby. */ "svgTitle"?: string; /** * Set aria-hidden attribute on svg * @default false */ "tdsAriaHidden": boolean; } interface TdsInlineTab { /** * Disables the Tab. * @default false */ "disabled": boolean; "setSelected": (selected: boolean) => Promise; } interface TdsInlineTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex": number; /** * Custom left padding value for the wrapper element. * @default 32 */ "leftPadding": number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default 'primary' */ "modeVariant": 'primary' | 'secondary'; /** * Reinitializes the component. */ "reinitialize": () => Promise; /** * Selects a Tab based on tabindex, will not select a disabled Tab. */ "selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel": string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel": string; } interface TdsLink { /** * Disables the Link * @default false */ "disabled": boolean; /** * Displays the Link as a standalone component. Not part of a paragraph. * @default false */ "standalone": boolean; /** * Displays the Link with an underline. * @default true */ "underline": boolean; } interface TdsMessage { /** * Header text for the component. */ "header"?: string; /** * Minimal Message styling. * @default false */ "minimal": boolean; /** * Variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Removes the icon in the Message. * @default false */ "noIcon": boolean; /** * Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog": 'alertdialog' | 'dialog'; /** * Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles. */ "tdsAriaLabel"?: string; /** * Variant of Message. * @default 'information' */ "variant": 'information' | 'error' | 'warning' | 'success'; } interface TdsModal { /** * Changes the position behaviour of the actions slot. * @default 'static' */ "actionsPosition": 'sticky' | 'static'; /** * Cleans up event listeners and other resources. */ "cleanupModal": () => Promise; /** * Shows or hides the close [X] button. * @default true */ "closable": boolean; /** * Closes the Modal. */ "closeModal": () => Promise; /** * Sets the header of the Modal. */ "header"?: string; /** * Initializes or re-initializes the modal, setting up event listeners. */ "initializeModal": () => Promise; /** * Returns the current open state of the Modal. */ "isOpen": () => Promise; /** * Disables closing Modal on clicking on overlay area. * @default false */ "prevent": boolean; /** * Element that will show the Modal (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * CSS selector for the element that will show the Modal. */ "selector"?: string; /** * Controls whether the Modal is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. */ "show"?: boolean; /** * Shows the Modal. */ "showModal": () => Promise; /** * Size of Modal * @default 'md' */ "size": 'xs' | 'sm' | 'md' | 'lg'; /** * Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog": 'alertdialog' | 'dialog'; } interface TdsNavigationTab { /** * Disables the Tab. * @default false */ "disabled": boolean; "setSelected": (selected: boolean) => Promise; } interface TdsNavigationTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex": number; /** * Custom left padding value for the wrapper element. * @default 32 */ "leftPadding": number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default 'primary' */ "modeVariant": 'primary' | 'secondary'; /** * Reinitializes the component. */ "reinitialize": () => Promise; /** * Sets the passed tabindex as the selected Tab. */ "selectTab": (tabIndex: number) => Promise<{ selectedTabIndex: number | undefined; }>; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel": string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel": string; } interface TdsPopoverCanvas { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation": 'none' | 'fade' | string; /** * Property for closing popover programmatically */ "close": () => Promise; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow": boolean; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ * @default [] */ "modifiers": object[]; /** * Sets the offset distance * @default 8 */ "offsetDistance": number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding": number; /** * Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement * @default 'auto' */ "placement": Placement; /** * Element that will trigger the Popover (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the Popover */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show": boolean | null; /** * Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog": 'alertdialog' | 'dialog'; } interface TdsPopoverCore { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation": 'none' | 'fade' | string; /** * Decides if the popover should hide automatically. Alternatevly it can be hidden externally based on emitted events. * @default true */ "autoHide": boolean; /** * Property for closing popover programmatically */ "close": () => Promise; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow": boolean; /** * Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ * @default [] */ "modifiers": object[]; /** * Sets the offset distance * @default 8 */ "offsetDistance": number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding": number; /** * Decides the placement of the Popover Menu * @default 'auto' */ "placement": Placement; /** * Element that will trigger the pop-over (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the pop-over */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show": boolean | null; /** * What triggers the popover to show * @default 'click' */ "trigger": 'click' | 'hover' | 'hover-popover'; } interface TdsPopoverMenu { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation": 'none' | 'fade' | string; /** * Property for closing popover programmatically */ "close": () => Promise; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow": boolean; /** * If true this unsets the width (160px) of the Popover Menu * @default false */ "fluidWidth": boolean; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Sets the offset distance * @default 8 */ "offsetDistance": number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding": number; /** * Decides the placement of the Popover Menu * @default 'auto' */ "placement": Placement; /** * Element that will trigger the pop-over (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the pop-over */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show": boolean | null; } interface TdsPopoverMenuItem { /** * Disables the Popover Menu Item * @default false */ "disabled": boolean; } interface TdsRadioButton { /** * Decides if the Radio Button is checked or not. * @default false */ "checked": boolean; /** * Decides if the Radio Button is disabled or not. * @default false */ "disabled": boolean; /** * Method to programmatically focus the radio button element */ "focusElement": () => Promise; /** * Name of Radio Button, used for reference. */ "name"?: string; /** * Unique Radio Button identifier. * @default generateUniqueId() */ "radioId": string; /** * Decides if the Radio Button is required or not. * @default false */ "required": boolean; /** * Provides an accessible name for the component */ "tdsAriaLabel"?: string; /** * Provides a tabindex used when radio buttons are grouped */ "tdsTabIndex"?: number; /** * Value of input. */ "value"?: string; } interface TdsSideMenu { /** * If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed. NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. * @default false */ "collapsed": boolean; /** * Applicable only for mobile. If the Side Menu is open or not. * @default false */ "open": boolean; /** * Applicable only for desktop. If the Side Menu should always be shown. * @default false */ "persistent": boolean; } interface TdsSideMenuCloseButton { } interface TdsSideMenuCollapseButton { } interface TdsSideMenuDropdown { /** * The label of the button that opens the dropdown. This is an alternative to the label slot. */ "buttonLabel"?: string; /** * If the dropdown should be open from the start. * @default false */ "defaultOpen": boolean; /** * Toggle open state programmatically * @default false */ "open": boolean; /** * If the button that opens the dropdown should appear selected. * @default false */ "selected": boolean; } interface TdsSideMenuDropdownList { } interface TdsSideMenuDropdownListItem { /** * If the item should appear selected. * @default false */ "selected": boolean; } interface TdsSideMenuItem { /** * If the item should appear active. Can be used when the item is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active": boolean; /** * If the item should appear selected. * @default false */ "selected": boolean; } interface TdsSideMenuOverlay { } interface TdsSideMenuUser { /** * The heading text. */ "heading": string; /** * The image alt text. */ "imgAlt"?: string; /** * The image source. */ "imgSrc"?: string; /** * The subheading text. */ "subheading"?: string; } interface TdsSideMenuUserImage { /** * The image alt text. */ "alt"?: string; /** * The image source. */ "src"?: string; } interface TdsSideMenuUserLabel { /** * The heading text. */ "heading": string; /** * The subheading text. */ "subheading"?: string; } interface TdsSlider { /** * Decide to show the controls or not * @default false */ "controls": boolean; /** * Sets the disabled state for the whole component * @default false */ "disabled": boolean; /** * Decide to show the input field or not * @default false */ "input": boolean; /** * Text for label * @default '' */ "label": string; /** * Maximum value * @default '100' */ "max": string; /** * Minimum value * @default '0' */ "min": string; /** * Name property (will be inherited by the native slider component) * @default '' */ "name": string; /** * Sets the read only state for the whole component * @default false */ "readOnly": boolean; /** * Public method to re-initialise the slider if some configuration props are changed */ "reset": () => Promise; /** * Decide to show numbers above the tick markers or not * @default false */ "showTickNumbers": boolean; /** * ID for the Slider's input element, randomly generated if not specified. * @default generateUniqueId() */ "sliderId": string; /** * Snap to the tick's grid * @default false */ "snap": boolean; /** * Defines how much to increment/decrement the value when using controls * @default '1' */ "step": string; /** * Sets the aria-label for the slider control. * @default '' */ "tdsAriaLabel": string; /** * Sets the read only aria label for the input field * @default '' */ "tdsReadOnlyAriaLabel": string; /** * Sets the size of the thumb * @default 'lg' */ "thumbSize": 'sm' | 'lg'; /** * Number of tick markers (tick for min- and max-value will be added automatically) * @default '0' */ "ticks": string; /** * Decide to show the tooltip or not * @default false */ "tooltip": boolean; /** * Initial value * @default '0' */ "value": string; } interface TdsSpinner { /** * Size of the Spinner * @default 'lg' */ "size": 'xs' | 'sm' | 'md' | 'lg'; /** * Variant of the Spinner * @default 'standard' */ "variant": 'standard' | 'inverted'; } interface TdsStep { /** * Index of the step. Will be displayed in the step if the state is current/upcoming. */ "index"?: string; /** * State of the Step * @default 'upcoming' */ "state": 'current' | 'error' | 'success' | 'upcoming'; "tdsAriaCurrent"?: string; } interface TdsStepper { /** * Hides the label for the child components if true. * @default false */ "hideLabels": boolean; /** * Text position, only available on a direction: horizontal * @default 'below' */ "labelPosition": 'aside' | 'below'; /** * The orientation the Steps * @default 'horizontal' */ "orientation": 'horizontal' | 'vertical'; /** * Size of the component and it's children. * @default 'lg' */ "size": 'sm' | 'lg'; /** * ID used for internal Stepper functionality and events, must be unique. **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper, as the default ID is random and will be different every time. * @default generateUniqueId() */ "stepperId": string; /** * Label for the stepper component, for screen reader users * @default 'Progress steps' */ "tdsAriaLabel": string; } interface TdsTable { /** * Enables style where Table toolbar, rows and footer are less high * @default false */ "compactDesign": boolean; /** * Enables extended row feature of Table * @default false */ "expandableRows": boolean; /** * Returns all selected rows data. */ "getSelectedRows": () => Promise<{ cellKey: string; cellValue: string | number; }[][]>; /** * Width of the table, used as the constraint for horizontal scrolling. **NOTE**: this will disable usage of the responsive flag * @default null */ "horizontalScrollWidth"?: string | null; /** * Variant of the component, based on current mode. * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Enables multiselect feature of Table * @default false */ "multiselect": boolean; /** * Enables to customize width on Table columns */ "noMinWidth"?: boolean; /** * Enables Table to take 100% available width with equal spacing of columns * @default false */ "responsive": boolean; /** * ID used for internal Table functionality and events, must be unique. **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table, as the default ID is random and will be different every time. * @default generateUniqueId() */ "tableId": string; /** * Enables style with vertical dividers between columns * @default false */ "verticalDividers": boolean; /** * Enables zebra stripe mode on the table rows or columns. * @default 'none' */ "zebraMode": | 'rows-odd' | 'rows-even' | 'columns-odd' | 'columns-even' | 'none'; } interface TdsTableBody { } interface TdsTableBodyInputWrapper { /** * Controls if the edit icon is shown * @default true */ "showIcon": boolean; } interface TdsTableBodyRow { /** * Makes the row clickable and tabbable for accessibility purposes. * @default false */ "clickable": boolean; /** * Marks the row as disabled, used for multiselect table. * @default false */ "disabled"?: boolean; /** * Marks the row as selected, used for multiselect table. * @default false */ "selected": boolean; } interface TdsTableBodyRowExpandable { /** * Enables auto-collapse of other expandable rows when one row is expanded * @default false */ "autoCollapse": boolean; /** * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too * @default null */ "colSpan": number | null; /** * Method to collapse table row */ "collapse": () => Promise; /** * Marks the row as disabled, used for multiselect table. * @default false */ "disabled"?: boolean; /** * Method to expand table row */ "expand": () => Promise; /** * Sets isExpanded state to true or false externally */ "expanded"?: boolean; /** * Controls the overflow behavior of the expandable row content * @default 'auto' */ "overflow": 'auto' | 'hidden' | 'visible'; /** * ID for the table row. Randomly generated if not specified. * @default generateUniqueId() */ "rowId": string; /** * Marks the row as selected, used for multiselect table. * @default false */ "selected": boolean; /** * Aria label for the expand button, providing an accessible description * @default '' */ "tdsAriaLabelExpandButton": string; } interface TdsTableFooter { /** * Client override Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. * @default null */ "cols": number | null; /** * Sets the number of pages. * @default 0 */ "pages": number; /** * Enable pagination and show pagination controls * @default false */ "pagination": boolean; /** * Sets the pagination number. * @default 1 */ "paginationValue": number; /** * Set rows per page dropdown open direction * @default 'auto' */ "rowsPerPageDropdownOpenDirection": 'up' | 'down' | 'auto'; /** * Set available rows per page values * @default [10, 25, 50] */ "rowsPerPageValues": number[]; /** * Enable rows per page dropdown * @default true */ "rowsperpage": boolean; } interface TdsTableHeader { /** * @deprecated Deprecated, use selected instead. * @default false */ "allSelected": boolean; /** * Prop for controlling the enabled/disabled state of the "All selected"-checkbox. * @default false */ "disabled"?: boolean; /** * Prop for controlling the indeterminate state of the "All selected"-checkbox. * @default false */ "indeterminate": boolean; /** * Prop for controlling the checked/unchecked state of the "All selected"-checkbox. */ "selected"?: boolean; } interface TdsTableHeaderInputWrapper { /** * @default false */ "compactDesign": boolean; /** * Controls if the search icon is shown * @default true */ "showIcon": boolean; } interface TdsTableToolbar { /** * Enables preview of searchbar * @default false */ "filter": boolean; /** * Adds title to the Table * @default '' */ "tableTitle": string; /** * Aria label for the search input, providing an accessible description * @default '' */ "tdsSearchAriaLabel": string; } interface TdsTag { /** * Sets the size of the tag * @default 'lg' */ "size": 'lg' | 'sm'; /** * The title text to display in the tag */ "text": string; /** * Sets the variant mode of the tag * @default 'Neutral' */ "variant": | 'success' | 'warning' | 'new' | 'neutral' | 'information' | 'error' | 'Success' | 'Warning' | 'New' | 'Neutral' | 'Information' | 'Error'; } interface TdsTextField { /** * Value to be used for the text field's autocomplete attribute * @default 'off' */ "autocomplete": string; /** * Autofocus for input * @default false */ "autofocus": boolean; /** * Set input in disabled state * @default false */ "disabled": boolean; /** * Method to handle focus */ "focusElement": () => Promise; /** * Helper text */ "helper"?: string; /** * Hides the native arrows on number input type * @default false */ "hideNumberArrows": boolean; /** * Hides the read-only icon in the Text Field. Requires Read Only to be enabled. * @default false */ "hideReadOnlyIcon": boolean; /** * Label text * @default '' */ "label": string; /** * Position of the label for the Text Field. * @default 'no-label' */ "labelPosition": 'inside' | 'outside' | 'no-label'; /** * Max allowed value for input type number */ "max"?: string | number; /** * Max length of input */ "maxLength"?: number; /** * Min allowed value for input type number */ "min"?: string | number; /** * Mode variant of the Text Field * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Name property * @default '' */ "name": string; /** * Unset minimum width of 208px. * @default false */ "noMinWidth": boolean; /** * Placeholder text * @default '' */ "placeholder": string; /** * Set input in readonly state * @default false */ "readOnly": boolean; /** * Makes the text field required * @default false */ "required": boolean; /** * Size of the input * @default 'lg' */ "size": 'sm' | 'md' | 'lg'; /** * Error state of input * @default 'default' */ "state": 'error' | 'success' | 'default'; /** * Step value for input type number */ "step"?: string | number; /** * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */ "tdsAriaLabel"?: string; /** * Which input type, text, password or similar * @default 'text' */ "type": 'text' | 'password' | 'number' | 'email' | 'tel'; /** * Value of the input text * @default '' */ "value": string; } interface TdsTextarea { /** * Control of autofocus * @default false */ "autofocus": boolean; /** * Textarea cols attribute */ "cols"?: number; /** * Set input in disabled state * @default false */ "disabled": boolean; /** * Method to programmatically focus the textarea element */ "focusElement": () => Promise; /** * Helper text */ "helper"?: string; /** * Hide the readonly icon * @default false */ "hideReadOnlyIcon": boolean; /** * Label text * @default '' */ "label": string; /** * Position of the label for the Textarea. * @default 'no-label' */ "labelPosition": 'inside' | 'outside' | 'no-label'; /** * Max length of input */ "maxLength"?: number; /** * Mode variant of the Textarea * @default null */ "modeVariant": 'primary' | 'secondary' | null; /** * Name attribute * @default '' */ "name": string; /** * Unset minimum width of 208px. * @default false */ "noMinWidth": boolean; /** * Placeholder text * @default '' */ "placeholder": string; /** * Set input in readonly state * @default false */ "readOnly": boolean; /** * Textarea rows attribute */ "rows"?: number; /** * Error state of input * @default 'default' */ "state": 'error' | 'success' | 'default'; /** * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */ "tdsAriaLabel"?: string; /** * Value of the input text * @default '' */ "value": string; } interface TdsToast { /** * Enables the close button. * @default true */ "closable": boolean; /** * Header text for the component. */ "header"?: string; /** * Hides the Toast. * @default false */ "hidden": boolean; /** * Hides the Toast. */ "hideToast": () => Promise; /** * Shows the Toast. */ "showToast": () => Promise; /** * Subheader text for the component. */ "subheader"?: string; /** * ARIA live for the Toast. * @default 'polite' */ "tdsAriaLive": 'polite' | 'assertive'; /** * Provides an accessible name for the components close button */ "tdsCloseAriaLabel"?: string; /** * ID for the Toast. Randomly generated if not specified. * @default generateUniqueId() */ "toastId": string; /** * ARIA role for the Toast. * @default 'alert' */ "toastRole": 'alert' | 'log' | 'status'; /** * Type of Toast. * @default 'information' */ "variant": 'information' | 'error' | 'warning' | 'success'; } interface TdsToggle { /** * Sets the Toggle as checked * @default false */ "checked": boolean; /** * Sets the Toggle in a disabled state * @default false */ "disabled": boolean; /** * Method to programmatically focus the toggle element */ "focusElement": () => Promise; /** * Headline for the Toggle */ "headline"?: string; /** * Name of the toggle's input element */ "name"?: string; /** * Make the Toggle required * @default false */ "required": boolean; /** * Size of the Toggle * @default 'lg' */ "size": 'sm' | 'lg'; /** * Defines aria-label attribute for input */ "tdsAriaLabel"?: string; /** * Toggles the Toggle. */ "toggle": () => Promise<{ toggleId: string; checked: boolean; }>; /** * ID of the Toggle's input element, if not specified, it's randomly generated * @default generateUniqueId() */ "toggleId": string; } interface TdsTooltip { /** * Decides if the component should be visible from the start. * @default false */ "defaultShow": boolean; /** * Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button. * @default false */ "mouseOverTooltip": boolean; /** * Sets the offset distance * @default 8 */ "offsetDistance": number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding": number; /** * Placement of Tooltip. * @default 'bottom' */ "placement": Placement; /** * Element that will trigger the Tooltip (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the Tooltip */ "selector"?: string; /** * Prop in control of showing and hiding prop. Takes precedence over `defaultOpen` prop. * @default null */ "show": boolean | null; /** * Sets the aria-describedby attribute */ "tdsAriaDescribedby"?: string; /** * In case Tooltip contains only text, no HTML, a text can be passed by this prop * @default '' */ "text": string; /** * What triggers the popover to show * @default 'hover' */ "trigger": 'click' | 'hover'; } } export interface TdsAccordionItemCustomEvent extends CustomEvent { detail: T; target: HTMLTdsAccordionItemElement; } export interface TdsBannerCustomEvent extends CustomEvent { detail: T; target: HTMLTdsBannerElement; } export interface TdsCardCustomEvent extends CustomEvent { detail: T; target: HTMLTdsCardElement; } export interface TdsCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLTdsCheckboxElement; } export interface TdsChipCustomEvent extends CustomEvent { detail: T; target: HTMLTdsChipElement; } export interface TdsDatetimeCustomEvent extends CustomEvent { detail: T; target: HTMLTdsDatetimeElement; } export interface TdsDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLTdsDropdownElement; } export interface TdsDropdownOptionCustomEvent extends CustomEvent { detail: T; target: HTMLTdsDropdownOptionElement; } export interface TdsFolderTabsCustomEvent extends CustomEvent { detail: T; target: HTMLTdsFolderTabsElement; } export interface TdsHeaderCellCustomEvent extends CustomEvent { detail: T; target: HTMLTdsHeaderCellElement; } export interface TdsInlineTabsCustomEvent extends CustomEvent { detail: T; target: HTMLTdsInlineTabsElement; } export interface TdsModalCustomEvent extends CustomEvent { detail: T; target: HTMLTdsModalElement; } export interface TdsNavigationTabsCustomEvent extends CustomEvent { detail: T; target: HTMLTdsNavigationTabsElement; } export interface TdsPopoverCoreCustomEvent extends CustomEvent { detail: T; target: HTMLTdsPopoverCoreElement; } export interface TdsRadioButtonCustomEvent extends CustomEvent { detail: T; target: HTMLTdsRadioButtonElement; } export interface TdsSideMenuCustomEvent extends CustomEvent { detail: T; target: HTMLTdsSideMenuElement; } export interface TdsSideMenuCollapseButtonCustomEvent extends CustomEvent { detail: T; target: HTMLTdsSideMenuCollapseButtonElement; } export interface TdsSliderCustomEvent extends CustomEvent { detail: T; target: HTMLTdsSliderElement; } export interface TdsStepperCustomEvent extends CustomEvent { detail: T; target: HTMLTdsStepperElement; } export interface TdsTableCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableElement; } export interface TdsTableBodyRowCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableBodyRowElement; } export interface TdsTableBodyRowExpandableCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableBodyRowExpandableElement; } export interface TdsTableFooterCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableFooterElement; } export interface TdsTableHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableHeaderElement; } export interface TdsTableToolbarCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTableToolbarElement; } export interface TdsTextFieldCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTextFieldElement; } export interface TdsTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLTdsTextareaElement; } export interface TdsToastCustomEvent extends CustomEvent { detail: T; target: HTMLTdsToastElement; } export interface TdsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLTdsToggleElement; } declare global { interface HTMLTdsAccordionElement extends Components.TdsAccordion, HTMLStencilElement { } var HTMLTdsAccordionElement: { prototype: HTMLTdsAccordionElement; new (): HTMLTdsAccordionElement; }; interface HTMLTdsAccordionItemElementEventMap { "tdsToggle": { expanded: boolean; }; } interface HTMLTdsAccordionItemElement extends Components.TdsAccordionItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsAccordionItemElement, ev: TdsAccordionItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsAccordionItemElement, ev: TdsAccordionItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsAccordionItemElement: { prototype: HTMLTdsAccordionItemElement; new (): HTMLTdsAccordionItemElement; }; interface HTMLTdsBadgeElement extends Components.TdsBadge, HTMLStencilElement { } var HTMLTdsBadgeElement: { prototype: HTMLTdsBadgeElement; new (): HTMLTdsBadgeElement; }; interface HTMLTdsBannerElementEventMap { "tdsClose": { bannerId: string; }; } interface HTMLTdsBannerElement extends Components.TdsBanner, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsBannerElement, ev: TdsBannerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsBannerElement, ev: TdsBannerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsBannerElement: { prototype: HTMLTdsBannerElement; new (): HTMLTdsBannerElement; }; /** * @example *
Semantic section content
*
*/ interface HTMLTdsBlockElement extends Components.TdsBlock, HTMLStencilElement { } var HTMLTdsBlockElement: { prototype: HTMLTdsBlockElement; new (): HTMLTdsBlockElement; }; interface HTMLTdsBodyCellElement extends Components.TdsBodyCell, HTMLStencilElement { } var HTMLTdsBodyCellElement: { prototype: HTMLTdsBodyCellElement; new (): HTMLTdsBodyCellElement; }; interface HTMLTdsBreadcrumbElement extends Components.TdsBreadcrumb, HTMLStencilElement { } var HTMLTdsBreadcrumbElement: { prototype: HTMLTdsBreadcrumbElement; new (): HTMLTdsBreadcrumbElement; }; interface HTMLTdsBreadcrumbsElement extends Components.TdsBreadcrumbs, HTMLStencilElement { } var HTMLTdsBreadcrumbsElement: { prototype: HTMLTdsBreadcrumbsElement; new (): HTMLTdsBreadcrumbsElement; }; interface HTMLTdsButtonElement extends Components.TdsButton, HTMLStencilElement { } var HTMLTdsButtonElement: { prototype: HTMLTdsButtonElement; new (): HTMLTdsButtonElement; }; interface HTMLTdsCardElementEventMap { "tdsClick": { cardId: string; }; } interface HTMLTdsCardElement extends Components.TdsCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsCardElement, ev: TdsCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsCardElement, ev: TdsCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsCardElement: { prototype: HTMLTdsCardElement; new (): HTMLTdsCardElement; }; interface HTMLTdsCheckboxElementEventMap { "tdsChange": { checkboxId: string; checked: boolean; indeterminate: boolean; value?: string; }; "tdsFocus": FocusEvent; "tdsBlur": FocusEvent; } interface HTMLTdsCheckboxElement extends Components.TdsCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsCheckboxElement, ev: TdsCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsCheckboxElement, ev: TdsCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsCheckboxElement: { prototype: HTMLTdsCheckboxElement; new (): HTMLTdsCheckboxElement; }; interface HTMLTdsChipElementEventMap { "tdsChange": { chipId: string; value: string | undefined; checked?: boolean; }; "internalRadioOnChange": { chipId: string; checked: boolean; groupName: string | undefined; }; "tdsClick": { chipId: string; }; } interface HTMLTdsChipElement extends Components.TdsChip, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsChipElement, ev: TdsChipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsChipElement, ev: TdsChipCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsChipElement: { prototype: HTMLTdsChipElement; new (): HTMLTdsChipElement; }; interface HTMLTdsCoreHeaderItemElement extends Components.TdsCoreHeaderItem, HTMLStencilElement { } var HTMLTdsCoreHeaderItemElement: { prototype: HTMLTdsCoreHeaderItemElement; new (): HTMLTdsCoreHeaderItemElement; }; interface HTMLTdsDatetimeElementEventMap { "tdsChange": any; "tdsBlur": FocusEvent; "tdsFocus": FocusEvent; "tdsInput": InputEvent; } interface HTMLTdsDatetimeElement extends Components.TdsDatetime, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsDatetimeElement, ev: TdsDatetimeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsDatetimeElement, ev: TdsDatetimeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsDatetimeElement: { prototype: HTMLTdsDatetimeElement; new (): HTMLTdsDatetimeElement; }; interface HTMLTdsDividerElement extends Components.TdsDivider, HTMLStencilElement { } var HTMLTdsDividerElement: { prototype: HTMLTdsDividerElement; new (): HTMLTdsDividerElement; }; interface HTMLTdsDropdownElementEventMap { "tdsChange": { name: string | undefined; value: string | null; }; "tdsFocus": FocusEvent; "tdsBlur": FocusEvent; "tdsInput": InputEvent; "tdsClear": { clearedValue: string }; } interface HTMLTdsDropdownElement extends Components.TdsDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsDropdownElement, ev: TdsDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsDropdownElement, ev: TdsDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsDropdownElement: { prototype: HTMLTdsDropdownElement; new (): HTMLTdsDropdownElement; }; interface HTMLTdsDropdownOptionElementEventMap { "tdsSelect": { selected: boolean; value: string; }; "tdsFocus": FocusEvent; "tdsBlur": FocusEvent; } interface HTMLTdsDropdownOptionElement extends Components.TdsDropdownOption, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsDropdownOptionElement, ev: TdsDropdownOptionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsDropdownOptionElement, ev: TdsDropdownOptionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsDropdownOptionElement: { prototype: HTMLTdsDropdownOptionElement; new (): HTMLTdsDropdownOptionElement; }; interface HTMLTdsFolderTabElement extends Components.TdsFolderTab, HTMLStencilElement { } var HTMLTdsFolderTabElement: { prototype: HTMLTdsFolderTabElement; new (): HTMLTdsFolderTabElement; }; interface HTMLTdsFolderTabsElementEventMap { "tdsChange": { selectedTabIndex: number; }; } interface HTMLTdsFolderTabsElement extends Components.TdsFolderTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsFolderTabsElement, ev: TdsFolderTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsFolderTabsElement, ev: TdsFolderTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsFolderTabsElement: { prototype: HTMLTdsFolderTabsElement; new (): HTMLTdsFolderTabsElement; }; interface HTMLTdsFooterElement extends Components.TdsFooter, HTMLStencilElement { } var HTMLTdsFooterElement: { prototype: HTMLTdsFooterElement; new (): HTMLTdsFooterElement; }; interface HTMLTdsFooterGroupElement extends Components.TdsFooterGroup, HTMLStencilElement { } var HTMLTdsFooterGroupElement: { prototype: HTMLTdsFooterGroupElement; new (): HTMLTdsFooterGroupElement; }; interface HTMLTdsFooterItemElement extends Components.TdsFooterItem, HTMLStencilElement { } var HTMLTdsFooterItemElement: { prototype: HTMLTdsFooterItemElement; new (): HTMLTdsFooterItemElement; }; interface HTMLTdsHeaderElement extends Components.TdsHeader, HTMLStencilElement { } var HTMLTdsHeaderElement: { prototype: HTMLTdsHeaderElement; new (): HTMLTdsHeaderElement; }; interface HTMLTdsHeaderBrandSymbolElement extends Components.TdsHeaderBrandSymbol, HTMLStencilElement { } var HTMLTdsHeaderBrandSymbolElement: { prototype: HTMLTdsHeaderBrandSymbolElement; new (): HTMLTdsHeaderBrandSymbolElement; }; interface HTMLTdsHeaderCellElementEventMap { "tdsSort": { tableId: string | undefined; columnKey: string | undefined; sortingDirection: 'asc' | 'desc'; }; "internalSortButtonClicked": { tableId: string | undefined; key: string | undefined; }; "internalTdsTextAlign": object; "internalTdsHover": { tableId: string | undefined; key: string; }; } interface HTMLTdsHeaderCellElement extends Components.TdsHeaderCell, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsHeaderCellElement, ev: TdsHeaderCellCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsHeaderCellElement, ev: TdsHeaderCellCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsHeaderCellElement: { prototype: HTMLTdsHeaderCellElement; new (): HTMLTdsHeaderCellElement; }; interface HTMLTdsHeaderDropdownElement extends Components.TdsHeaderDropdown, HTMLStencilElement { } var HTMLTdsHeaderDropdownElement: { prototype: HTMLTdsHeaderDropdownElement; new (): HTMLTdsHeaderDropdownElement; }; interface HTMLTdsHeaderDropdownListElement extends Components.TdsHeaderDropdownList, HTMLStencilElement { } var HTMLTdsHeaderDropdownListElement: { prototype: HTMLTdsHeaderDropdownListElement; new (): HTMLTdsHeaderDropdownListElement; }; interface HTMLTdsHeaderDropdownListItemElement extends Components.TdsHeaderDropdownListItem, HTMLStencilElement { } var HTMLTdsHeaderDropdownListItemElement: { prototype: HTMLTdsHeaderDropdownListItemElement; new (): HTMLTdsHeaderDropdownListItemElement; }; interface HTMLTdsHeaderDropdownListUserElement extends Components.TdsHeaderDropdownListUser, HTMLStencilElement { } var HTMLTdsHeaderDropdownListUserElement: { prototype: HTMLTdsHeaderDropdownListUserElement; new (): HTMLTdsHeaderDropdownListUserElement; }; interface HTMLTdsHeaderHamburgerElement extends Components.TdsHeaderHamburger, HTMLStencilElement { } var HTMLTdsHeaderHamburgerElement: { prototype: HTMLTdsHeaderHamburgerElement; new (): HTMLTdsHeaderHamburgerElement; }; interface HTMLTdsHeaderItemElement extends Components.TdsHeaderItem, HTMLStencilElement { } var HTMLTdsHeaderItemElement: { prototype: HTMLTdsHeaderItemElement; new (): HTMLTdsHeaderItemElement; }; interface HTMLTdsHeaderLauncherElement extends Components.TdsHeaderLauncher, HTMLStencilElement { } var HTMLTdsHeaderLauncherElement: { prototype: HTMLTdsHeaderLauncherElement; new (): HTMLTdsHeaderLauncherElement; }; interface HTMLTdsHeaderLauncherButtonElement extends Components.TdsHeaderLauncherButton, HTMLStencilElement { } var HTMLTdsHeaderLauncherButtonElement: { prototype: HTMLTdsHeaderLauncherButtonElement; new (): HTMLTdsHeaderLauncherButtonElement; }; interface HTMLTdsHeaderLauncherGridElement extends Components.TdsHeaderLauncherGrid, HTMLStencilElement { } var HTMLTdsHeaderLauncherGridElement: { prototype: HTMLTdsHeaderLauncherGridElement; new (): HTMLTdsHeaderLauncherGridElement; }; interface HTMLTdsHeaderLauncherGridItemElement extends Components.TdsHeaderLauncherGridItem, HTMLStencilElement { } var HTMLTdsHeaderLauncherGridItemElement: { prototype: HTMLTdsHeaderLauncherGridItemElement; new (): HTMLTdsHeaderLauncherGridItemElement; }; interface HTMLTdsHeaderLauncherGridTitleElement extends Components.TdsHeaderLauncherGridTitle, HTMLStencilElement { } var HTMLTdsHeaderLauncherGridTitleElement: { prototype: HTMLTdsHeaderLauncherGridTitleElement; new (): HTMLTdsHeaderLauncherGridTitleElement; }; interface HTMLTdsHeaderLauncherListElement extends Components.TdsHeaderLauncherList, HTMLStencilElement { } var HTMLTdsHeaderLauncherListElement: { prototype: HTMLTdsHeaderLauncherListElement; new (): HTMLTdsHeaderLauncherListElement; }; interface HTMLTdsHeaderLauncherListItemElement extends Components.TdsHeaderLauncherListItem, HTMLStencilElement { } var HTMLTdsHeaderLauncherListItemElement: { prototype: HTMLTdsHeaderLauncherListItemElement; new (): HTMLTdsHeaderLauncherListItemElement; }; interface HTMLTdsHeaderLauncherListTitleElement extends Components.TdsHeaderLauncherListTitle, HTMLStencilElement { } var HTMLTdsHeaderLauncherListTitleElement: { prototype: HTMLTdsHeaderLauncherListTitleElement; new (): HTMLTdsHeaderLauncherListTitleElement; }; interface HTMLTdsHeaderTitleElement extends Components.TdsHeaderTitle, HTMLStencilElement { } var HTMLTdsHeaderTitleElement: { prototype: HTMLTdsHeaderTitleElement; new (): HTMLTdsHeaderTitleElement; }; interface HTMLTdsIconElement extends Components.TdsIcon, HTMLStencilElement { } var HTMLTdsIconElement: { prototype: HTMLTdsIconElement; new (): HTMLTdsIconElement; }; interface HTMLTdsInlineTabElement extends Components.TdsInlineTab, HTMLStencilElement { } var HTMLTdsInlineTabElement: { prototype: HTMLTdsInlineTabElement; new (): HTMLTdsInlineTabElement; }; interface HTMLTdsInlineTabsElementEventMap { "tdsChange": { selectedTabIndex: number; }; } interface HTMLTdsInlineTabsElement extends Components.TdsInlineTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsInlineTabsElement, ev: TdsInlineTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsInlineTabsElement, ev: TdsInlineTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsInlineTabsElement: { prototype: HTMLTdsInlineTabsElement; new (): HTMLTdsInlineTabsElement; }; interface HTMLTdsLinkElement extends Components.TdsLink, HTMLStencilElement { } var HTMLTdsLinkElement: { prototype: HTMLTdsLinkElement; new (): HTMLTdsLinkElement; }; interface HTMLTdsMessageElement extends Components.TdsMessage, HTMLStencilElement { } var HTMLTdsMessageElement: { prototype: HTMLTdsMessageElement; new (): HTMLTdsMessageElement; }; interface HTMLTdsModalElementEventMap { "tdsClose": object; "tdsOpen": void; } interface HTMLTdsModalElement extends Components.TdsModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsModalElement, ev: TdsModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsModalElement, ev: TdsModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsModalElement: { prototype: HTMLTdsModalElement; new (): HTMLTdsModalElement; }; interface HTMLTdsNavigationTabElement extends Components.TdsNavigationTab, HTMLStencilElement { } var HTMLTdsNavigationTabElement: { prototype: HTMLTdsNavigationTabElement; new (): HTMLTdsNavigationTabElement; }; interface HTMLTdsNavigationTabsElementEventMap { "tdsChange": { selectedTabIndex: number; }; } interface HTMLTdsNavigationTabsElement extends Components.TdsNavigationTabs, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsNavigationTabsElement, ev: TdsNavigationTabsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsNavigationTabsElement, ev: TdsNavigationTabsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsNavigationTabsElement: { prototype: HTMLTdsNavigationTabsElement; new (): HTMLTdsNavigationTabsElement; }; interface HTMLTdsPopoverCanvasElement extends Components.TdsPopoverCanvas, HTMLStencilElement { } var HTMLTdsPopoverCanvasElement: { prototype: HTMLTdsPopoverCanvasElement; new (): HTMLTdsPopoverCanvasElement; }; interface HTMLTdsPopoverCoreElementEventMap { "internalTdsShow": object; "internalTdsClose": object; } interface HTMLTdsPopoverCoreElement extends Components.TdsPopoverCore, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsPopoverCoreElement, ev: TdsPopoverCoreCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsPopoverCoreElement, ev: TdsPopoverCoreCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsPopoverCoreElement: { prototype: HTMLTdsPopoverCoreElement; new (): HTMLTdsPopoverCoreElement; }; interface HTMLTdsPopoverMenuElement extends Components.TdsPopoverMenu, HTMLStencilElement { } var HTMLTdsPopoverMenuElement: { prototype: HTMLTdsPopoverMenuElement; new (): HTMLTdsPopoverMenuElement; }; interface HTMLTdsPopoverMenuItemElement extends Components.TdsPopoverMenuItem, HTMLStencilElement { } var HTMLTdsPopoverMenuItemElement: { prototype: HTMLTdsPopoverMenuItemElement; new (): HTMLTdsPopoverMenuItemElement; }; interface HTMLTdsRadioButtonElementEventMap { "tdsChange": { radioId: string; value: string | undefined; }; } interface HTMLTdsRadioButtonElement extends Components.TdsRadioButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsRadioButtonElement, ev: TdsRadioButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsRadioButtonElement, ev: TdsRadioButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsRadioButtonElement: { prototype: HTMLTdsRadioButtonElement; new (): HTMLTdsRadioButtonElement; }; interface HTMLTdsSideMenuElementEventMap { "tdsCollapse": CollapseEvent; "internalTdsCollapse": CollapseEvent; "internalTdsSideMenuPropChange": InternalTdsSideMenuPropChange; } interface HTMLTdsSideMenuElement extends Components.TdsSideMenu, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsSideMenuElement, ev: TdsSideMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsSideMenuElement, ev: TdsSideMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsSideMenuElement: { prototype: HTMLTdsSideMenuElement; new (): HTMLTdsSideMenuElement; }; interface HTMLTdsSideMenuCloseButtonElement extends Components.TdsSideMenuCloseButton, HTMLStencilElement { } var HTMLTdsSideMenuCloseButtonElement: { prototype: HTMLTdsSideMenuCloseButtonElement; new (): HTMLTdsSideMenuCloseButtonElement; }; interface HTMLTdsSideMenuCollapseButtonElementEventMap { "tdsCollapse": CollapseEvent1; "internalTdsCollapse": CollapseEvent1; } interface HTMLTdsSideMenuCollapseButtonElement extends Components.TdsSideMenuCollapseButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsSideMenuCollapseButtonElement, ev: TdsSideMenuCollapseButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsSideMenuCollapseButtonElement, ev: TdsSideMenuCollapseButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsSideMenuCollapseButtonElement: { prototype: HTMLTdsSideMenuCollapseButtonElement; new (): HTMLTdsSideMenuCollapseButtonElement; }; interface HTMLTdsSideMenuDropdownElement extends Components.TdsSideMenuDropdown, HTMLStencilElement { } var HTMLTdsSideMenuDropdownElement: { prototype: HTMLTdsSideMenuDropdownElement; new (): HTMLTdsSideMenuDropdownElement; }; interface HTMLTdsSideMenuDropdownListElement extends Components.TdsSideMenuDropdownList, HTMLStencilElement { } var HTMLTdsSideMenuDropdownListElement: { prototype: HTMLTdsSideMenuDropdownListElement; new (): HTMLTdsSideMenuDropdownListElement; }; interface HTMLTdsSideMenuDropdownListItemElement extends Components.TdsSideMenuDropdownListItem, HTMLStencilElement { } var HTMLTdsSideMenuDropdownListItemElement: { prototype: HTMLTdsSideMenuDropdownListItemElement; new (): HTMLTdsSideMenuDropdownListItemElement; }; interface HTMLTdsSideMenuItemElement extends Components.TdsSideMenuItem, HTMLStencilElement { } var HTMLTdsSideMenuItemElement: { prototype: HTMLTdsSideMenuItemElement; new (): HTMLTdsSideMenuItemElement; }; interface HTMLTdsSideMenuOverlayElement extends Components.TdsSideMenuOverlay, HTMLStencilElement { } var HTMLTdsSideMenuOverlayElement: { prototype: HTMLTdsSideMenuOverlayElement; new (): HTMLTdsSideMenuOverlayElement; }; interface HTMLTdsSideMenuUserElement extends Components.TdsSideMenuUser, HTMLStencilElement { } var HTMLTdsSideMenuUserElement: { prototype: HTMLTdsSideMenuUserElement; new (): HTMLTdsSideMenuUserElement; }; interface HTMLTdsSideMenuUserImageElement extends Components.TdsSideMenuUserImage, HTMLStencilElement { } var HTMLTdsSideMenuUserImageElement: { prototype: HTMLTdsSideMenuUserImageElement; new (): HTMLTdsSideMenuUserImageElement; }; interface HTMLTdsSideMenuUserLabelElement extends Components.TdsSideMenuUserLabel, HTMLStencilElement { } var HTMLTdsSideMenuUserLabelElement: { prototype: HTMLTdsSideMenuUserLabelElement; new (): HTMLTdsSideMenuUserLabelElement; }; interface HTMLTdsSliderElementEventMap { "tdsChange": { value: string; }; "tdsInput": { value: string; }; } interface HTMLTdsSliderElement extends Components.TdsSlider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsSliderElement, ev: TdsSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsSliderElement, ev: TdsSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsSliderElement: { prototype: HTMLTdsSliderElement; new (): HTMLTdsSliderElement; }; interface HTMLTdsSpinnerElement extends Components.TdsSpinner, HTMLStencilElement { } var HTMLTdsSpinnerElement: { prototype: HTMLTdsSpinnerElement; new (): HTMLTdsSpinnerElement; }; interface HTMLTdsStepElement extends Components.TdsStep, HTMLStencilElement { } var HTMLTdsStepElement: { prototype: HTMLTdsStepElement; new (): HTMLTdsStepElement; }; interface HTMLTdsStepperElementEventMap { "internalTdsPropsChange": InternalTdsStepperPropChange; } interface HTMLTdsStepperElement extends Components.TdsStepper, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsStepperElement, ev: TdsStepperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsStepperElement, ev: TdsStepperCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsStepperElement: { prototype: HTMLTdsStepperElement; new (): HTMLTdsStepperElement; }; interface HTMLTdsTableElementEventMap { "internalTdsTablePropChange": InternalTdsTablePropChange; } interface HTMLTdsTableElement extends Components.TdsTable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableElement, ev: TdsTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableElement, ev: TdsTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableElement: { prototype: HTMLTdsTableElement; new (): HTMLTdsTableElement; }; interface HTMLTdsTableBodyElement extends Components.TdsTableBody, HTMLStencilElement { } var HTMLTdsTableBodyElement: { prototype: HTMLTdsTableBodyElement; new (): HTMLTdsTableBodyElement; }; interface HTMLTdsTableBodyInputWrapperElement extends Components.TdsTableBodyInputWrapper, HTMLStencilElement { } var HTMLTdsTableBodyInputWrapperElement: { prototype: HTMLTdsTableBodyInputWrapperElement; new (): HTMLTdsTableBodyInputWrapperElement; }; interface HTMLTdsTableBodyRowElementEventMap { "tdsSelect": { tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }; "tdsClick": { event: MouseEvent; tableId: string | undefined; rowIndex: number; }; } interface HTMLTdsTableBodyRowElement extends Components.TdsTableBodyRow, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableBodyRowElement, ev: TdsTableBodyRowCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableBodyRowElement, ev: TdsTableBodyRowCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableBodyRowElement: { prototype: HTMLTdsTableBodyRowElement; new (): HTMLTdsTableBodyRowElement; }; interface HTMLTdsTableBodyRowExpandableElementEventMap { "internalTdsRowExpanded": object; "tdsChange": { rowId: string; isExpanded: boolean; tableId: string | undefined; }; "tdsSelect": { tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }; } interface HTMLTdsTableBodyRowExpandableElement extends Components.TdsTableBodyRowExpandable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableBodyRowExpandableElement, ev: TdsTableBodyRowExpandableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableBodyRowExpandableElement, ev: TdsTableBodyRowExpandableCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableBodyRowExpandableElement: { prototype: HTMLTdsTableBodyRowExpandableElement; new (): HTMLTdsTableBodyRowExpandableElement; }; interface HTMLTdsTableFooterElementEventMap { "tdsPagination": { tableId: string | undefined; paginationValue: number; rowsPerPage?: number; }; } interface HTMLTdsTableFooterElement extends Components.TdsTableFooter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableFooterElement, ev: TdsTableFooterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableFooterElement, ev: TdsTableFooterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableFooterElement: { prototype: HTMLTdsTableFooterElement; new (): HTMLTdsTableFooterElement; }; interface HTMLTdsTableHeaderElementEventMap { "tdsSelectAll": { tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }; } interface HTMLTdsTableHeaderElement extends Components.TdsTableHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableHeaderElement, ev: TdsTableHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableHeaderElement, ev: TdsTableHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableHeaderElement: { prototype: HTMLTdsTableHeaderElement; new (): HTMLTdsTableHeaderElement; }; interface HTMLTdsTableHeaderInputWrapperElement extends Components.TdsTableHeaderInputWrapper, HTMLStencilElement { } var HTMLTdsTableHeaderInputWrapperElement: { prototype: HTMLTdsTableHeaderInputWrapperElement; new (): HTMLTdsTableHeaderInputWrapperElement; }; interface HTMLTdsTableToolbarElementEventMap { "tdsFilter": { tableId: string | undefined; query: string; }; } interface HTMLTdsTableToolbarElement extends Components.TdsTableToolbar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTableToolbarElement, ev: TdsTableToolbarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTableToolbarElement, ev: TdsTableToolbarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTableToolbarElement: { prototype: HTMLTdsTableToolbarElement; new (): HTMLTdsTableToolbarElement; }; interface HTMLTdsTagElement extends Components.TdsTag, HTMLStencilElement { } var HTMLTdsTagElement: { prototype: HTMLTdsTagElement; new (): HTMLTdsTagElement; }; interface HTMLTdsTextFieldElementEventMap { "tdsChange": any; "tdsInput": InputEvent; "tdsFocus": FocusEvent; "tdsBlur": FocusEvent; "tdsError": { originalValue: string; clampedValue: string; reason: 'min' | 'max' }; } interface HTMLTdsTextFieldElement extends Components.TdsTextField, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTextFieldElement, ev: TdsTextFieldCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTextFieldElement, ev: TdsTextFieldCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTextFieldElement: { prototype: HTMLTdsTextFieldElement; new (): HTMLTdsTextFieldElement; }; interface HTMLTdsTextareaElementEventMap { "tdsChange": any; "tdsBlur": FocusEvent; "tdsInput": InputEvent; "tdsFocus": FocusEvent; } interface HTMLTdsTextareaElement extends Components.TdsTextarea, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsTextareaElement, ev: TdsTextareaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsTextareaElement, ev: TdsTextareaCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsTextareaElement: { prototype: HTMLTdsTextareaElement; new (): HTMLTdsTextareaElement; }; interface HTMLTdsToastElementEventMap { "tdsClose": { toastId: string; }; } interface HTMLTdsToastElement extends Components.TdsToast, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsToastElement, ev: TdsToastCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsToastElement, ev: TdsToastCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsToastElement: { prototype: HTMLTdsToastElement; new (): HTMLTdsToastElement; }; interface HTMLTdsToggleElementEventMap { "tdsToggle": { toggleId: string; checked: boolean; }; } interface HTMLTdsToggleElement extends Components.TdsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLTdsToggleElement, ev: TdsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLTdsToggleElement, ev: TdsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLTdsToggleElement: { prototype: HTMLTdsToggleElement; new (): HTMLTdsToggleElement; }; interface HTMLTdsTooltipElement extends Components.TdsTooltip, HTMLStencilElement { } var HTMLTdsTooltipElement: { prototype: HTMLTdsTooltipElement; new (): HTMLTdsTooltipElement; }; interface HTMLElementTagNameMap { "tds-accordion": HTMLTdsAccordionElement; "tds-accordion-item": HTMLTdsAccordionItemElement; "tds-badge": HTMLTdsBadgeElement; "tds-banner": HTMLTdsBannerElement; "tds-block": HTMLTdsBlockElement; "tds-body-cell": HTMLTdsBodyCellElement; "tds-breadcrumb": HTMLTdsBreadcrumbElement; "tds-breadcrumbs": HTMLTdsBreadcrumbsElement; "tds-button": HTMLTdsButtonElement; "tds-card": HTMLTdsCardElement; "tds-checkbox": HTMLTdsCheckboxElement; "tds-chip": HTMLTdsChipElement; "tds-core-header-item": HTMLTdsCoreHeaderItemElement; "tds-datetime": HTMLTdsDatetimeElement; "tds-divider": HTMLTdsDividerElement; "tds-dropdown": HTMLTdsDropdownElement; "tds-dropdown-option": HTMLTdsDropdownOptionElement; "tds-folder-tab": HTMLTdsFolderTabElement; "tds-folder-tabs": HTMLTdsFolderTabsElement; "tds-footer": HTMLTdsFooterElement; "tds-footer-group": HTMLTdsFooterGroupElement; "tds-footer-item": HTMLTdsFooterItemElement; "tds-header": HTMLTdsHeaderElement; "tds-header-brand-symbol": HTMLTdsHeaderBrandSymbolElement; "tds-header-cell": HTMLTdsHeaderCellElement; "tds-header-dropdown": HTMLTdsHeaderDropdownElement; "tds-header-dropdown-list": HTMLTdsHeaderDropdownListElement; "tds-header-dropdown-list-item": HTMLTdsHeaderDropdownListItemElement; "tds-header-dropdown-list-user": HTMLTdsHeaderDropdownListUserElement; "tds-header-hamburger": HTMLTdsHeaderHamburgerElement; "tds-header-item": HTMLTdsHeaderItemElement; "tds-header-launcher": HTMLTdsHeaderLauncherElement; "tds-header-launcher-button": HTMLTdsHeaderLauncherButtonElement; "tds-header-launcher-grid": HTMLTdsHeaderLauncherGridElement; "tds-header-launcher-grid-item": HTMLTdsHeaderLauncherGridItemElement; "tds-header-launcher-grid-title": HTMLTdsHeaderLauncherGridTitleElement; "tds-header-launcher-list": HTMLTdsHeaderLauncherListElement; "tds-header-launcher-list-item": HTMLTdsHeaderLauncherListItemElement; "tds-header-launcher-list-title": HTMLTdsHeaderLauncherListTitleElement; "tds-header-title": HTMLTdsHeaderTitleElement; "tds-icon": HTMLTdsIconElement; "tds-inline-tab": HTMLTdsInlineTabElement; "tds-inline-tabs": HTMLTdsInlineTabsElement; "tds-link": HTMLTdsLinkElement; "tds-message": HTMLTdsMessageElement; "tds-modal": HTMLTdsModalElement; "tds-navigation-tab": HTMLTdsNavigationTabElement; "tds-navigation-tabs": HTMLTdsNavigationTabsElement; "tds-popover-canvas": HTMLTdsPopoverCanvasElement; "tds-popover-core": HTMLTdsPopoverCoreElement; "tds-popover-menu": HTMLTdsPopoverMenuElement; "tds-popover-menu-item": HTMLTdsPopoverMenuItemElement; "tds-radio-button": HTMLTdsRadioButtonElement; "tds-side-menu": HTMLTdsSideMenuElement; "tds-side-menu-close-button": HTMLTdsSideMenuCloseButtonElement; "tds-side-menu-collapse-button": HTMLTdsSideMenuCollapseButtonElement; "tds-side-menu-dropdown": HTMLTdsSideMenuDropdownElement; "tds-side-menu-dropdown-list": HTMLTdsSideMenuDropdownListElement; "tds-side-menu-dropdown-list-item": HTMLTdsSideMenuDropdownListItemElement; "tds-side-menu-item": HTMLTdsSideMenuItemElement; "tds-side-menu-overlay": HTMLTdsSideMenuOverlayElement; "tds-side-menu-user": HTMLTdsSideMenuUserElement; "tds-side-menu-user-image": HTMLTdsSideMenuUserImageElement; "tds-side-menu-user-label": HTMLTdsSideMenuUserLabelElement; "tds-slider": HTMLTdsSliderElement; "tds-spinner": HTMLTdsSpinnerElement; "tds-step": HTMLTdsStepElement; "tds-stepper": HTMLTdsStepperElement; "tds-table": HTMLTdsTableElement; "tds-table-body": HTMLTdsTableBodyElement; "tds-table-body-input-wrapper": HTMLTdsTableBodyInputWrapperElement; "tds-table-body-row": HTMLTdsTableBodyRowElement; "tds-table-body-row-expandable": HTMLTdsTableBodyRowExpandableElement; "tds-table-footer": HTMLTdsTableFooterElement; "tds-table-header": HTMLTdsTableHeaderElement; "tds-table-header-input-wrapper": HTMLTdsTableHeaderInputWrapperElement; "tds-table-toolbar": HTMLTdsTableToolbarElement; "tds-tag": HTMLTdsTagElement; "tds-text-field": HTMLTdsTextFieldElement; "tds-textarea": HTMLTdsTextareaElement; "tds-toast": HTMLTdsToastElement; "tds-toggle": HTMLTdsToggleElement; "tds-tooltip": HTMLTdsTooltipElement; } } declare namespace LocalJSX { type OneOf = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never }; interface TdsAccordion { /** * Removes the bottom border of the last Accordion item. * @default false */ "hideLastBorder"?: boolean; /** * Set the variant of the Accordion. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; } interface TdsAccordionItem { /** * Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6. * @default '6' */ "ariaLevelValue"?: '1' | '2' | '3' | '4' | '5' | '6'; /** * Disabled option in `boolean`. * @default false */ "disabled"?: boolean; /** * Changes position of the expand icon. * @default 'end' */ "expandIconPosition"?: 'start' | 'end'; /** * Set to true to expand panel open * @default false */ "expanded"?: boolean; /** * The header gives users the context about the additional information available inside the panel * @default '' */ "header"?: string; /** * Fires when the Accordion Item is clicked, but before it is closed or opened. */ "onTdsToggle"?: (event: TdsAccordionItemCustomEvent<{ expanded: boolean; }>) => void; /** * When true, 16px on right padding instead of 64px * @default false */ "paddingReset"?: boolean; } interface TdsBadge { /** * Changes visibility of Badge * @default false */ "hidden"?: boolean; /** * Sets component size. * @default 'lg' */ "size"?: 'lg' | 'sm'; /** * Defines aria-live attribute * @default 'polite' */ "tdsAriaLive"?: 'off' | 'polite' | 'assertive'; /** * Value shown in Badge * @default '' */ "value"?: string; } interface TdsBanner { /** * ID used for internal table functionality and events, must be unique. **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time. * @default generateUniqueId() */ "bannerId"?: string; /** * Header text. */ "header"?: string; /** * Hides the Banner * @default false */ "hidden"?: boolean; /** * Name of the icon for the component. For error and information variant, the icon is predefined. */ "icon"?: IconNames; /** * Sends a unique Banner identifier when the close button is pressed. */ "onTdsClose"?: (event: TdsBannerCustomEvent<{ bannerId: string; }>) => void; /** * Defines the ARIA role of the banner. Defaults to "banner" for global use, but can be set to "region" or "alert" if used differently. * @default 'banner' */ "roleType"?: 'banner' | 'region' | 'alert'; /** * Subheader text. */ "subheader"?: string; /** * Variant of Banner * @default 'default' */ "variant"?: 'error' | 'information' | 'default'; } /** * @example *
Semantic section content
*
*/ interface TdsBlock { /** * Specifies the HTML tag to be used for the component wrapper. * @default 'div' */ "componentTag"?: | 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main'; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; } interface TdsBodyCell { /** * Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering */ "cellKey"?: string; /** * Value that will be presented as text inside a cell */ "cellValue"?: string | number; /** * Number of columns the cell should span. */ "colSpan"?: number; /** * Disables internal padding. Useful when passing other components to cell. * @default false */ "disablePadding"?: boolean; /** * Number of rows the cell should span. */ "rowSpan"?: number; /** * Setting for text align, default value "left". Other accepted values are "left", "start", "right", "end" or "center". */ "textAlign"?: TextAlign; } interface TdsBreadcrumb { /** * Boolean for the current link * @default false */ "current"?: boolean; } interface TdsBreadcrumbs { /** * The value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsButton { /** * Determines if and how the button should animate. * @default 'none' */ "animation"?: 'none' | 'fade'; /** * Control for disabled state of a component * @default false */ "disabled"?: boolean; /** * When enabled, the Button takes 100% width * @default false */ "fullbleed"?: boolean; /** * Set the mode variant of the Button. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * The name attribute allows for different ways of accessing the button element */ "name"?: string; /** * Size of a Button * @default 'lg' */ "size"?: 'xs' | 'sm' | 'md' | 'lg'; /** * The value to be used for the aria-label attribute if onlyIcon is set to true */ "tdsAriaLabel"?: string; /** * Text displayed inside the Button */ "text"?: string; /** * Button's type * @default 'button' */ "type"?: 'button' | 'submit' | 'reset'; /** * The value attribute can be used when handling a form submission */ "value"?: string; /** * Variation of Button's design * @default 'primary' */ "variant"?: 'primary' | 'secondary' | 'ghost' | 'danger'; } interface TdsCard { /** * Divider for the body * @default false */ "bodyDivider"?: boolean; /** * Body image src */ "bodyImg"?: string; /** * Alt text for the body image */ "bodyImgAlt"?: string; /** * ID for the Card, must be unique. **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card, as the default ID is random and will be different every time. * @default generateUniqueId() */ "cardId"?: string; /** * Makes the Card clickable. * @default false */ "clickable"?: boolean; /** * Enables expandable behaviour. When true, clicking the header toggles content visibility. * @default false */ "expandable"?: boolean; /** * Tracks the current expanded state when expandable is enabled. * @default false */ "expanded"?: boolean; /** * Text in the header */ "header"?: string; /** * Placement of the header * @default 'below-header' */ "imagePlacement"?: 'above-header' | 'below-header'; /** * Variant of the Card based on the theme used. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Sends unique Card identifier when the Card is clicked, if clickable=true */ "onTdsClick"?: (event: TdsCardCustomEvent<{ cardId: string; }>) => void; /** * @default false */ "stretch"?: boolean; /** * Subheader text in the header */ "subheader"?: string; } interface TdsCheckbox { /** * ID for the Checkbox's input element. Randomly generated if not specified. * @default generateUniqueId() */ "checkboxId"?: string; /** * Sets the Checkbox as checked * @default false */ "checked"?: boolean; /** * Sets the Checkbox in a disabled state * @default false */ "disabled"?: boolean; /** * Sets the Checkbox as indeterminate * @default false */ "indeterminate"?: boolean; /** * Name for the Checkbox's input element. */ "name"?: string; /** * Blur event for the Checkbox */ "onTdsBlur"?: (event: TdsCheckboxCustomEvent) => void; /** * Sends unique Checkbox identifier and checked status when it is checked/unchecked. */ "onTdsChange"?: (event: TdsCheckboxCustomEvent<{ checkboxId: string; checked: boolean; indeterminate: boolean; value?: string; }>) => void; /** * Focus event for the Checkbox */ "onTdsFocus"?: (event: TdsCheckboxCustomEvent) => void; /** * Make the Checkbox required * @default false */ "required"?: boolean; /** * Value to be used for the aria-describedby attribute */ "tdsAriaDescribedby"?: string; /** * Value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Value for the Checkbox */ "value"?: string; } interface TdsChip { /** * Controls component's checked attribute. Valid only for type checkbox and radio. * @default false */ "checked"?: boolean; /** * ID used for internal Chip functionality and events, must be unique. **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input, as the default ID is random and will be different every time. * @default generateUniqueId() */ "chipId"?: string; /** * Sets the Chip in a disabled state * @default false */ "disabled"?: boolean; /** * Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio. */ "name"?: string; /** * Sends unique Chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. If no ID is specified, a random one will be generated. To use this listener, don't use the randomized ID, use a specific one of your choosing. */ "onTdsChange"?: (event: TdsChipCustomEvent<{ chipId: string; value: string | undefined; checked?: boolean; }>) => void; /** * Sends unique Chip identifier when Chip is clicked. Valid only for type button. If no ID is specified, a random one will be generated. To use this listener, don't use the randomized ID, use a specific one of your choosing. */ "onTdsClick"?: (event: TdsChipCustomEvent<{ chipId: string; }>) => void; /** * Size of the Chip component * @default 'lg' */ "size"?: 'sm' | 'lg'; /** * Value to be used for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Type of Chip, depends on usage * @default 'button' */ "type"?: 'button' | 'radio' | 'checkbox'; /** * Value of input. Valid only for type checkbox and radio. */ "value"?: string; } interface TdsCoreHeaderItem { } interface TdsDatetime { /** * Autofocus for input * @default false */ "autofocus"?: boolean; /** * Function for additional validation based on business rules */ "customValidator"?: (value: string) => boolean; /** * Default value of the component.
Format for date-time: yyyy-MM-ddTHH:mm.
Format for date: yyyy-MM-dd.
Format for month: yyyy-MM.
Format for week: yyyy-Www.
Format for time: HH:mm. * @default 'none' */ "defaultValue"?: string | 'none'; /** * Set input in disabled state * @default false */ "disabled"?: boolean; /** * Default contextual helper text for the component for states = success or none * @default '' */ "helper"?: string; /** * Contextual helper text for the component for error state */ "helperError"?: string; /** * Contextual helper text for the component when input is invalid * @default 'Invalid input' */ "helperErrorInvalid"?: string; /** * Label text for the component * @default '' */ "label"?: string; /** * Position of the label * @default 'no-label' */ "labelPosition"?: 'inside' | 'outside' | 'no-label'; /** * Sets max value.
Example for different types:
datetime="2023-01-31T00:00"
date="2023-01-01"
month="2023-01"
week="2023-W02"
time="15:00" */ "max"?: string; /** * Sets min value.
Example for different types:
datetime="2023-01-31T00:00"
date="2023-01-01"
month="2023-01"
week="2023-W02"
time="15:00" */ "min"?: string; /** * Set the variant of the Datetime component. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Name property. Uses a unique ID as fallback if not specified. * @default `datetime-${generateUniqueId()}` */ "name"?: string; /** * Resets min width rule * @default false */ "noMinWidth"?: boolean; /** * Blur event for the Datetime */ "onTdsBlur"?: (event: TdsDatetimeCustomEvent) => void; /** * Change event for the Datetime */ "onTdsChange"?: (event: TdsDatetimeCustomEvent) => void; /** * Focus event for the Datetime */ "onTdsFocus"?: (event: TdsDatetimeCustomEvent) => void; /** * Input event for the Datetime */ "onTdsInput"?: (event: TdsDatetimeCustomEvent) => void; /** * Size of the input * @default 'lg' */ "size"?: 'sm' | 'md' | 'lg'; /** * Switches between success and error state. */ "state"?: 'none' | 'success' | 'error'; /** * Value for the aria-label attribute */ "tdsAriaLabel"?: string; /** * Sets an input type * @default 'datetime-local' */ "type"?: 'datetime-local' | 'date' | 'month' | 'week' | 'time'; /** * Value of the input text * @default '' */ "value"?: string; } interface TdsDivider { /** * Orientation of the Divider, horizontal if not specified. * @default 'horizontal' */ "orientation"?: 'horizontal' | 'vertical'; /** * Variant of the Divider, subtle if not specified. * @default 'subtle' */ "variant"?: 'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue'; } interface TdsDropdown { /** * @default 'slide' */ "animation"?: 'none' | 'slide'; /** * Default value selected in the Dropdown. */ "defaultValue"?: string | number; /** * Sets the Dropdown in a disabled state * @default false */ "disabled"?: boolean; /** * Sets the Dropdown in an error state * @default false */ "error"?: boolean; /** * Enables filtration in the Dropdown. * @default false */ "filter"?: boolean; /** * Helper text for the Dropdown. */ "helper"?: string; /** * Label text for the Dropdown. */ "label"?: string; /** * Label text position */ "labelPosition"?: 'inside' | 'outside'; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Enables multiselect in the Dropdown. * @default false */ "multiselect"?: boolean; /** * Name for the Dropdowns input element. */ "name"?: string; /** * Text that is displayed if filter is used and there are no options that matches the search. Setting it to an empty string disables message from showing up. * @default 'No result' */ "noResultText"?: string; /** * Normalizes input text for fuzzier search * @default true */ "normalizeText"?: boolean; /** * Blur event for the Dropdown. */ "onTdsBlur"?: (event: TdsDropdownCustomEvent) => void; /** * Change event for the Dropdown. */ "onTdsChange"?: (event: TdsDropdownCustomEvent<{ name: string | undefined; value: string | null; }>) => void; /** * Clear event for the Dropdown. */ "onTdsClear"?: (event: TdsDropdownCustomEvent<{ clearedValue: string }>) => void; /** * Focus event for the Dropdown. */ "onTdsFocus"?: (event: TdsDropdownCustomEvent) => void; /** * Input event for the Dropdown. */ "onTdsInput"?: (event: TdsDropdownCustomEvent) => void; /** * The direction the Dropdown should open, auto if not specified. * @default 'auto' */ "openDirection"?: 'up' | 'down' | 'auto'; /** * Placeholder text for the Dropdown. */ "placeholder"?: string; /** * The size of the Dropdown. * @default 'lg' */ "size"?: 'xs' | 'sm' | 'md' | 'lg'; /** * Defines aria-label attribute for input */ "tdsAriaLabel"?: string; /** * Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. * @default null */ "value"?: string | number | (string | number)[] | null; } interface TdsDropdownOption { /** * Sets the option as disabled. * @default false */ "disabled"?: boolean; /** * Blur event for the Dropdown option. */ "onTdsBlur"?: (event: TdsDropdownOptionCustomEvent) => void; /** * Focus event for the Dropdown option. */ "onTdsFocus"?: (event: TdsDropdownOptionCustomEvent) => void; /** * Click event for the Dropdown option. */ "onTdsSelect"?: (event: TdsDropdownOptionCustomEvent<{ selected: boolean; value: string; }>) => void; /** * Defines aria-label attribute for the option */ "tdsAriaLabel"?: string; /** * Value of the dropdown option */ "value"?: string | number; } interface TdsFolderTab { /** * Disables the Tab. * @default false */ "disabled"?: boolean; } interface TdsFolderTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex"?: number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Event emitted when the selected Tab is changed. */ "onTdsChange"?: (event: TdsFolderTabsCustomEvent<{ selectedTabIndex: number; }>) => void; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel"?: string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel"?: string; } interface TdsFooter { /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; } interface TdsFooterGroup { /** * Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility. */ "tdsListAriaLabel"?: string; /** * Title text for the link group, only valid on top part of Footer. */ "titleText"?: string; } interface TdsFooterItem { } interface TdsHeader { } interface TdsHeaderBrandSymbol { } interface TdsHeaderCell { /** * The value of column key, usually comes from JSON, needed for sorting */ "cellKey"?: string; /** * Text that displays in column cell */ "cellValue"?: string; /** * Number of columns the cell should span. */ "colSpan"?: number; /** * In case noMinWidth is set, the user has to specify the width value for each column. */ "customWidth"?: string; /** * Disables internal padding. Useful when passing other components to cell. * @default false */ "disablePadding"?: boolean; /** * Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to implement custom-sorting logic. */ "onTdsSort"?: (event: TdsHeaderCellCustomEvent<{ tableId: string | undefined; columnKey: string | undefined; sortingDirection: 'asc' | 'desc'; }>) => void; /** * Number of rows the cell should span. */ "rowSpan"?: number; /** * Enables sorting on that column * @default false */ "sortable"?: boolean; /** * Aria label for the sort button, providing an accessible description * @default '' */ "tdsAriaLabelSortButton"?: string; /** * Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". * @default 'left' */ "textAlign"?: TextAlign; } interface TdsHeaderDropdown { /** * The label of the button that opens the dropdown. This is an alternative to the label slot. */ "label"?: string; /** * If the dropdown icon (downwards chevron) should be hidden. * @default false */ "noDropdownIcon"?: boolean; /** * If the button that opens the dropdown should appear selected. * @default false */ "selected"?: boolean; /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderDropdownList { /** * The size of the component. * @default 'md' */ "size"?: 'lg' | 'md'; } interface TdsHeaderDropdownListItem { /** * If the link should appear selected. * @default false */ "selected"?: boolean; /** * The size of the component. * @default 'md' */ "size"?: 'md' | 'lg'; } interface TdsHeaderDropdownListUser { /** * Header text, usually the users first name and last name. */ "header"?: string; /** * Image alt text. */ "imgAlt"?: string; /** * Image URL. */ "imgUrl"?: string; /** * Subheader text. */ "subheader"?: string; } interface TdsHeaderHamburger { /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderItem { /** * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active"?: boolean; /** * If the button should appear selected. * @default false */ "selected"?: boolean; } interface TdsHeaderLauncher { /** * Value to be used by the aria-label attribute of the launcher button */ "tdsAriaLabel"?: string; } interface TdsHeaderLauncherButton { /** * If the button should appear active. Can be used when the button is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active"?: boolean; /** * Value to be used by the aria-label attribute */ "tdsAriaLabel"?: string; } interface TdsHeaderLauncherGrid { } interface TdsHeaderLauncherGridItem { } interface TdsHeaderLauncherGridTitle { } interface TdsHeaderLauncherList { } interface TdsHeaderLauncherListItem { } interface TdsHeaderLauncherListTitle { } interface TdsHeaderTitle { } interface TdsIcon { /** * Pass the name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library * @default 'truck' */ "name"?: IconNames; /** * Pass a size of icon as a string, for example, 32px, 1rem, 4em... * @default '16px' */ "size"?: string; /** * Set description for the svg. Also used by aria-describedby. */ "svgDescription"?: string; /** * Override the default title for the svg. Also used by aria-labelledby. */ "svgTitle"?: string; /** * Set aria-hidden attribute on svg * @default false */ "tdsAriaHidden"?: boolean; } interface TdsInlineTab { /** * Disables the Tab. * @default false */ "disabled"?: boolean; } interface TdsInlineTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex"?: number; /** * Custom left padding value for the wrapper element. * @default 32 */ "leftPadding"?: number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default 'primary' */ "modeVariant"?: 'primary' | 'secondary'; /** * Event emitted when the selected Tab is changed. */ "onTdsChange"?: (event: TdsInlineTabsCustomEvent<{ selectedTabIndex: number; }>) => void; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel"?: string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel"?: string; } interface TdsLink { /** * Disables the Link * @default false */ "disabled"?: boolean; /** * Displays the Link as a standalone component. Not part of a paragraph. * @default false */ "standalone"?: boolean; /** * Displays the Link with an underline. * @default true */ "underline"?: boolean; } interface TdsMessage { /** * Header text for the component. */ "header"?: string; /** * Minimal Message styling. * @default false */ "minimal"?: boolean; /** * Variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Removes the icon in the Message. * @default false */ "noIcon"?: boolean; /** * Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog"?: 'alertdialog' | 'dialog'; /** * Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles. */ "tdsAriaLabel"?: string; /** * Variant of Message. * @default 'information' */ "variant"?: 'information' | 'error' | 'warning' | 'success'; } interface TdsModal { /** * Changes the position behaviour of the actions slot. * @default 'static' */ "actionsPosition"?: 'sticky' | 'static'; /** * Shows or hides the close [X] button. * @default true */ "closable"?: boolean; /** * Sets the header of the Modal. */ "header"?: string; /** * Emits when the Modal is closed. */ "onTdsClose"?: (event: TdsModalCustomEvent) => void; /** * Emits just before Modal is opened. */ "onTdsOpen"?: (event: TdsModalCustomEvent) => void; /** * Disables closing Modal on clicking on overlay area. * @default false */ "prevent"?: boolean; /** * Element that will show the Modal (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * CSS selector for the element that will show the Modal. */ "selector"?: string; /** * Controls whether the Modal is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. */ "show"?: boolean; /** * Size of Modal * @default 'md' */ "size"?: 'xs' | 'sm' | 'md' | 'lg'; /** * Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog"?: 'alertdialog' | 'dialog'; } interface TdsNavigationTab { /** * Disables the Tab. * @default false */ "disabled"?: boolean; } interface TdsNavigationTabs { /** * Sets the default selected Tab. * @default 0 */ "defaultSelectedIndex"?: number; /** * Custom left padding value for the wrapper element. * @default 32 */ "leftPadding"?: number; /** * Variant of the Tabs, primary= on white, secondary= on grey50 * @default 'primary' */ "modeVariant"?: 'primary' | 'secondary'; /** * Event emitted when the selected Tab is changed. */ "onTdsChange"?: (event: TdsNavigationTabsCustomEvent<{ selectedTabIndex: number; }>) => void; /** * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user. */ "selectedIndex"?: number; /** * Defines aria-label on left scroll button * @default 'Scroll left' */ "tdsScrollLeftAriaLabel"?: string; /** * Defines aria-label on right scroll button * @default 'Scroll right' */ "tdsScrollRightAriaLabel"?: string; } interface TdsPopoverCanvas { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation"?: 'none' | 'fade' | string; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow"?: boolean; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ * @default [] */ "modifiers"?: object[]; /** * Sets the offset distance * @default 8 */ "offsetDistance"?: number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding"?: number; /** * Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement * @default 'auto' */ "placement"?: Placement; /** * Element that will trigger the Popover (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the Popover */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show"?: boolean | null; /** * Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. * @default 'dialog' */ "tdsAlertDialog"?: 'alertdialog' | 'dialog'; } interface TdsPopoverCore { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation"?: 'none' | 'fade' | string; /** * Decides if the popover should hide automatically. Alternatevly it can be hidden externally based on emitted events. * @default true */ "autoHide"?: boolean; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow"?: boolean; /** * Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ * @default [] */ "modifiers"?: object[]; /** * Sets the offset distance * @default 8 */ "offsetDistance"?: number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding"?: number; /** * Decides the placement of the Popover Menu * @default 'auto' */ "placement"?: Placement; /** * Element that will trigger the pop-over (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the pop-over */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show"?: boolean | null; /** * What triggers the popover to show * @default 'click' */ "trigger"?: 'click' | 'hover' | 'hover-popover'; } interface TdsPopoverMenu { /** * Whether the popover should animate when being opened/closed or not * @default 'none' */ "animation"?: 'none' | 'fade' | string; /** * Decides if the component should be visible from the start. * @default false */ "defaultShow"?: boolean; /** * If true this unsets the width (160px) of the Popover Menu * @default false */ "fluidWidth"?: boolean; /** * Mode variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Sets the offset distance * @default 8 */ "offsetDistance"?: number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding"?: number; /** * Decides the placement of the Popover Menu * @default 'auto' */ "placement"?: Placement; /** * Element that will trigger the pop-over (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the pop-over */ "selector"?: string; /** * Controls whether the Popover is shown or not. If this is set hiding and showing will be decided by this prop and will need to be controlled from the outside. This also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop. * @default null */ "show"?: boolean | null; } interface TdsPopoverMenuItem { /** * Disables the Popover Menu Item * @default false */ "disabled"?: boolean; } interface TdsRadioButton { /** * Decides if the Radio Button is checked or not. * @default false */ "checked"?: boolean; /** * Decides if the Radio Button is disabled or not. * @default false */ "disabled"?: boolean; /** * Name of Radio Button, used for reference. */ "name"?: string; /** * Sends unique Radio Button identifier and status when it is checked. If no ID is specified, a random one will be generated. To use this listener, don't use the randomized ID, use a specific one of your choosing. */ "onTdsChange"?: (event: TdsRadioButtonCustomEvent<{ radioId: string; value: string | undefined; }>) => void; /** * Unique Radio Button identifier. * @default generateUniqueId() */ "radioId"?: string; /** * Decides if the Radio Button is required or not. * @default false */ "required"?: boolean; /** * Provides an accessible name for the component */ "tdsAriaLabel"?: string; /** * Provides a tabindex used when radio buttons are grouped */ "tdsTabIndex"?: number; /** * Value of input. */ "value"?: string; } interface TdsSideMenu { /** * If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed. NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. * @default false */ "collapsed"?: boolean; /** * Event that is emitted when the Side Menu is collapsed. */ "onTdsCollapse"?: (event: TdsSideMenuCustomEvent) => void; /** * Applicable only for mobile. If the Side Menu is open or not. * @default false */ "open"?: boolean; /** * Applicable only for desktop. If the Side Menu should always be shown. * @default false */ "persistent"?: boolean; } interface TdsSideMenuCloseButton { } interface TdsSideMenuCollapseButton { /** * Event that is broadcast when the collapse button is clicked. Prevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself. */ "onTdsCollapse"?: (event: TdsSideMenuCollapseButtonCustomEvent) => void; } interface TdsSideMenuDropdown { /** * The label of the button that opens the dropdown. This is an alternative to the label slot. */ "buttonLabel"?: string; /** * If the dropdown should be open from the start. * @default false */ "defaultOpen"?: boolean; /** * Toggle open state programmatically * @default false */ "open"?: boolean; /** * If the button that opens the dropdown should appear selected. * @default false */ "selected"?: boolean; } interface TdsSideMenuDropdownList { } interface TdsSideMenuDropdownListItem { /** * If the item should appear selected. * @default false */ "selected"?: boolean; } interface TdsSideMenuItem { /** * If the item should appear active. Can be used when the item is triggering a dropdown, and the dropdown is open, for example. * @default false */ "active"?: boolean; /** * If the item should appear selected. * @default false */ "selected"?: boolean; } interface TdsSideMenuOverlay { } interface TdsSideMenuUser { /** * The heading text. */ "heading": string; /** * The image alt text. */ "imgAlt"?: string; /** * The image source. */ "imgSrc"?: string; /** * The subheading text. */ "subheading"?: string; } interface TdsSideMenuUserImage { /** * The image alt text. */ "alt"?: string; /** * The image source. */ "src"?: string; } interface TdsSideMenuUserLabel { /** * The heading text. */ "heading": string; /** * The subheading text. */ "subheading"?: string; } interface TdsSlider { /** * Decide to show the controls or not * @default false */ "controls"?: boolean; /** * Sets the disabled state for the whole component * @default false */ "disabled"?: boolean; /** * Decide to show the input field or not * @default false */ "input"?: boolean; /** * Text for label * @default '' */ "label"?: string; /** * Maximum value * @default '100' */ "max"?: string; /** * Minimum value * @default '0' */ "min"?: string; /** * Name property (will be inherited by the native slider component) * @default '' */ "name"?: string; /** * Sends the value of the slider when changed. Fires after mouse up and touch end events. */ "onTdsChange"?: (event: TdsSliderCustomEvent<{ value: string; }>) => void; /** * Sends the value of the slider while moving the thumb. Fires on mouse move and touch move events. */ "onTdsInput"?: (event: TdsSliderCustomEvent<{ value: string; }>) => void; /** * Sets the read only state for the whole component * @default false */ "readOnly"?: boolean; /** * Decide to show numbers above the tick markers or not * @default false */ "showTickNumbers"?: boolean; /** * ID for the Slider's input element, randomly generated if not specified. * @default generateUniqueId() */ "sliderId"?: string; /** * Snap to the tick's grid * @default false */ "snap"?: boolean; /** * Defines how much to increment/decrement the value when using controls * @default '1' */ "step"?: string; /** * Sets the aria-label for the slider control. * @default '' */ "tdsAriaLabel"?: string; /** * Sets the read only aria label for the input field * @default '' */ "tdsReadOnlyAriaLabel"?: string; /** * Sets the size of the thumb * @default 'lg' */ "thumbSize"?: 'sm' | 'lg'; /** * Number of tick markers (tick for min- and max-value will be added automatically) * @default '0' */ "ticks"?: string; /** * Decide to show the tooltip or not * @default false */ "tooltip"?: boolean; /** * Initial value * @default '0' */ "value"?: string; } interface TdsSpinner { /** * Size of the Spinner * @default 'lg' */ "size"?: 'xs' | 'sm' | 'md' | 'lg'; /** * Variant of the Spinner * @default 'standard' */ "variant"?: 'standard' | 'inverted'; } interface TdsStep { /** * Index of the step. Will be displayed in the step if the state is current/upcoming. */ "index"?: string; /** * State of the Step * @default 'upcoming' */ "state"?: 'current' | 'error' | 'success' | 'upcoming'; "tdsAriaCurrent"?: string; } interface TdsStepper { /** * Hides the label for the child components if true. * @default false */ "hideLabels"?: boolean; /** * Text position, only available on a direction: horizontal * @default 'below' */ "labelPosition"?: 'aside' | 'below'; /** * The orientation the Steps * @default 'horizontal' */ "orientation"?: 'horizontal' | 'vertical'; /** * Size of the component and it's children. * @default 'lg' */ "size"?: 'sm' | 'lg'; /** * ID used for internal Stepper functionality and events, must be unique. **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper, as the default ID is random and will be different every time. * @default generateUniqueId() */ "stepperId"?: string; /** * Label for the stepper component, for screen reader users * @default 'Progress steps' */ "tdsAriaLabel"?: string; } interface TdsTable { /** * Enables style where Table toolbar, rows and footer are less high * @default false */ "compactDesign"?: boolean; /** * Enables extended row feature of Table * @default false */ "expandableRows"?: boolean; /** * Width of the table, used as the constraint for horizontal scrolling. **NOTE**: this will disable usage of the responsive flag * @default null */ "horizontalScrollWidth"?: string | null; /** * Variant of the component, based on current mode. * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Enables multiselect feature of Table * @default false */ "multiselect"?: boolean; /** * Enables to customize width on Table columns */ "noMinWidth"?: boolean; /** * Enables Table to take 100% available width with equal spacing of columns * @default false */ "responsive"?: boolean; /** * ID used for internal Table functionality and events, must be unique. **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table, as the default ID is random and will be different every time. * @default generateUniqueId() */ "tableId"?: string; /** * Enables style with vertical dividers between columns * @default false */ "verticalDividers"?: boolean; /** * Enables zebra stripe mode on the table rows or columns. * @default 'none' */ "zebraMode"?: | 'rows-odd' | 'rows-even' | 'columns-odd' | 'columns-even' | 'none'; } interface TdsTableBody { } interface TdsTableBodyInputWrapper { /** * Controls if the edit icon is shown * @default true */ "showIcon"?: boolean; } interface TdsTableBodyRow { /** * Makes the row clickable and tabbable for accessibility purposes. * @default false */ "clickable"?: boolean; /** * Marks the row as disabled, used for multiselect table. * @default false */ "disabled"?: boolean; /** * Event emitted when a row is clicked. */ "onTdsClick"?: (event: TdsTableBodyRowCustomEvent<{ event: MouseEvent; tableId: string | undefined; rowIndex: number; }>) => void; /** * Event emitted when a row is selected/deselected. */ "onTdsSelect"?: (event: TdsTableBodyRowCustomEvent<{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }>) => void; /** * Marks the row as selected, used for multiselect table. * @default false */ "selected"?: boolean; } interface TdsTableBodyRowExpandable { /** * Enables auto-collapse of other expandable rows when one row is expanded * @default false */ "autoCollapse"?: boolean; /** * In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too * @default null */ "colSpan"?: number | null; /** * Marks the row as disabled, used for multiselect table. * @default false */ "disabled"?: boolean; /** * Sets isExpanded state to true or false externally */ "expanded"?: boolean; /** * Sends unique table row identifier and isExpanded status when it is expanded/collapsed. */ "onTdsChange"?: (event: TdsTableBodyRowExpandableCustomEvent<{ rowId: string; isExpanded: boolean; tableId: string | undefined; }>) => void; /** * Event emitted when a row is selected/deselected. */ "onTdsSelect"?: (event: TdsTableBodyRowExpandableCustomEvent<{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }>) => void; /** * Controls the overflow behavior of the expandable row content * @default 'auto' */ "overflow"?: 'auto' | 'hidden' | 'visible'; /** * ID for the table row. Randomly generated if not specified. * @default generateUniqueId() */ "rowId"?: string; /** * Marks the row as selected, used for multiselect table. * @default false */ "selected"?: boolean; /** * Aria label for the expand button, providing an accessible description * @default '' */ "tdsAriaLabelExpandButton"?: string; } interface TdsTableFooter { /** * Client override Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. * @default null */ "cols"?: number | null; /** * Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic. */ "onTdsPagination"?: (event: TdsTableFooterCustomEvent<{ tableId: string | undefined; paginationValue: number; rowsPerPage?: number; }>) => void; /** * Sets the number of pages. * @default 0 */ "pages"?: number; /** * Enable pagination and show pagination controls * @default false */ "pagination"?: boolean; /** * Sets the pagination number. * @default 1 */ "paginationValue"?: number; /** * Set rows per page dropdown open direction * @default 'auto' */ "rowsPerPageDropdownOpenDirection"?: 'up' | 'down' | 'auto'; /** * Set available rows per page values * @default [10, 25, 50] */ "rowsPerPageValues"?: number[]; /** * Enable rows per page dropdown * @default true */ "rowsperpage"?: boolean; } interface TdsTableHeader { /** * @deprecated Deprecated, use selected instead. * @default false */ "allSelected"?: boolean; /** * Prop for controlling the enabled/disabled state of the "All selected"-checkbox. * @default false */ "disabled"?: boolean; /** * Prop for controlling the indeterminate state of the "All selected"-checkbox. * @default false */ "indeterminate"?: boolean; /** * Event emitted when the status of the select all checkbox changes. */ "onTdsSelectAll"?: (event: TdsTableHeaderCustomEvent<{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }>) => void; /** * Prop for controlling the checked/unchecked state of the "All selected"-checkbox. */ "selected"?: boolean; } interface TdsTableHeaderInputWrapper { /** * @default false */ "compactDesign"?: boolean; /** * Controls if the search icon is shown * @default true */ "showIcon"?: boolean; } interface TdsTableToolbar { /** * Enables preview of searchbar * @default false */ "filter"?: boolean; /** * Used for sending users' input to the main parent tds-table the component, can also be listened to in order to implement custom sorting logic. */ "onTdsFilter"?: (event: TdsTableToolbarCustomEvent<{ tableId: string | undefined; query: string; }>) => void; /** * Adds title to the Table * @default '' */ "tableTitle"?: string; /** * Aria label for the search input, providing an accessible description * @default '' */ "tdsSearchAriaLabel"?: string; } interface TdsTag { /** * Sets the size of the tag * @default 'lg' */ "size"?: 'lg' | 'sm'; /** * The title text to display in the tag */ "text": string; /** * Sets the variant mode of the tag * @default 'Neutral' */ "variant"?: | 'success' | 'warning' | 'new' | 'neutral' | 'information' | 'error' | 'Success' | 'Warning' | 'New' | 'Neutral' | 'Information' | 'Error'; } interface TdsTextField { /** * Value to be used for the text field's autocomplete attribute * @default 'off' */ "autocomplete"?: string; /** * Autofocus for input * @default false */ "autofocus"?: boolean; /** * Set input in disabled state * @default false */ "disabled"?: boolean; /** * Helper text */ "helper"?: string; /** * Hides the native arrows on number input type * @default false */ "hideNumberArrows"?: boolean; /** * Hides the read-only icon in the Text Field. Requires Read Only to be enabled. * @default false */ "hideReadOnlyIcon"?: boolean; /** * Label text * @default '' */ "label"?: string; /** * Position of the label for the Text Field. * @default 'no-label' */ "labelPosition"?: 'inside' | 'outside' | 'no-label'; /** * Max allowed value for input type number */ "max"?: string | number; /** * Max length of input */ "maxLength"?: number; /** * Min allowed value for input type number */ "min"?: string | number; /** * Mode variant of the Text Field * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Name property * @default '' */ "name"?: string; /** * Unset minimum width of 208px. * @default false */ "noMinWidth"?: boolean; /** * Blur event for the Text Field */ "onTdsBlur"?: (event: TdsTextFieldCustomEvent) => void; /** * Change event for the Text Field */ "onTdsChange"?: (event: TdsTextFieldCustomEvent) => void; /** * Error event for the Text Field - emitted when value is clamped to min/max */ "onTdsError"?: (event: TdsTextFieldCustomEvent<{ originalValue: string; clampedValue: string; reason: 'min' | 'max' }>) => void; /** * Focus event for the Text Field */ "onTdsFocus"?: (event: TdsTextFieldCustomEvent) => void; /** * Input event for the Text Field */ "onTdsInput"?: (event: TdsTextFieldCustomEvent) => void; /** * Placeholder text * @default '' */ "placeholder"?: string; /** * Set input in readonly state * @default false */ "readOnly"?: boolean; /** * Makes the text field required * @default false */ "required"?: boolean; /** * Size of the input * @default 'lg' */ "size"?: 'sm' | 'md' | 'lg'; /** * Error state of input * @default 'default' */ "state"?: 'error' | 'success' | 'default'; /** * Step value for input type number */ "step"?: string | number; /** * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */ "tdsAriaLabel"?: string; /** * Which input type, text, password or similar * @default 'text' */ "type"?: 'text' | 'password' | 'number' | 'email' | 'tel'; /** * Value of the input text * @default '' */ "value"?: string; } interface TdsTextarea { /** * Control of autofocus * @default false */ "autofocus"?: boolean; /** * Textarea cols attribute */ "cols"?: number; /** * Set input in disabled state * @default false */ "disabled"?: boolean; /** * Helper text */ "helper"?: string; /** * Hide the readonly icon * @default false */ "hideReadOnlyIcon"?: boolean; /** * Label text * @default '' */ "label"?: string; /** * Position of the label for the Textarea. * @default 'no-label' */ "labelPosition"?: 'inside' | 'outside' | 'no-label'; /** * Max length of input */ "maxLength"?: number; /** * Mode variant of the Textarea * @default null */ "modeVariant"?: 'primary' | 'secondary' | null; /** * Name attribute * @default '' */ "name"?: string; /** * Unset minimum width of 208px. * @default false */ "noMinWidth"?: boolean; /** * Blur event for the Textarea */ "onTdsBlur"?: (event: TdsTextareaCustomEvent) => void; /** * Change event for the Textarea */ "onTdsChange"?: (event: TdsTextareaCustomEvent) => void; /** * Focus event for the Textarea */ "onTdsFocus"?: (event: TdsTextareaCustomEvent) => void; /** * Input event for the Textarea */ "onTdsInput"?: (event: TdsTextareaCustomEvent) => void; /** * Placeholder text * @default '' */ "placeholder"?: string; /** * Set input in readonly state * @default false */ "readOnly"?: boolean; /** * Textarea rows attribute */ "rows"?: number; /** * Error state of input * @default 'default' */ "state"?: 'error' | 'success' | 'default'; /** * Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */ "tdsAriaLabel"?: string; /** * Value of the input text * @default '' */ "value"?: string; } interface TdsToast { /** * Enables the close button. * @default true */ "closable"?: boolean; /** * Header text for the component. */ "header"?: string; /** * Hides the Toast. * @default false */ "hidden"?: boolean; /** * Sends unique Toast identifier when component is closed. */ "onTdsClose"?: (event: TdsToastCustomEvent<{ toastId: string; }>) => void; /** * Subheader text for the component. */ "subheader"?: string; /** * ARIA live for the Toast. * @default 'polite' */ "tdsAriaLive"?: 'polite' | 'assertive'; /** * Provides an accessible name for the components close button */ "tdsCloseAriaLabel"?: string; /** * ID for the Toast. Randomly generated if not specified. * @default generateUniqueId() */ "toastId"?: string; /** * ARIA role for the Toast. * @default 'alert' */ "toastRole"?: 'alert' | 'log' | 'status'; /** * Type of Toast. * @default 'information' */ "variant"?: 'information' | 'error' | 'warning' | 'success'; } interface TdsToggle { /** * Sets the Toggle as checked * @default false */ "checked"?: boolean; /** * Sets the Toggle in a disabled state * @default false */ "disabled"?: boolean; /** * Headline for the Toggle */ "headline"?: string; /** * Name of the toggle's input element */ "name"?: string; /** * Sends unique Toggle identifier and status when it is toggled. */ "onTdsToggle"?: (event: TdsToggleCustomEvent<{ toggleId: string; checked: boolean; }>) => void; /** * Make the Toggle required * @default false */ "required"?: boolean; /** * Size of the Toggle * @default 'lg' */ "size"?: 'sm' | 'lg'; /** * Defines aria-label attribute for input */ "tdsAriaLabel"?: string; /** * ID of the Toggle's input element, if not specified, it's randomly generated * @default generateUniqueId() */ "toggleId"?: string; } interface TdsTooltip { /** * Decides if the component should be visible from the start. * @default false */ "defaultShow"?: boolean; /** * Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button. * @default false */ "mouseOverTooltip"?: boolean; /** * Sets the offset distance * @default 8 */ "offsetDistance"?: number; /** * Sets the offset skidding * @default 0 */ "offsetSkidding"?: number; /** * Placement of Tooltip. * @default 'bottom' */ "placement"?: Placement; /** * Element that will trigger the Tooltip (takes priority over selector) */ "referenceEl"?: HTMLElement | null; /** * The CSS-selector for an element that will trigger the Tooltip */ "selector"?: string; /** * Prop in control of showing and hiding prop. Takes precedence over `defaultOpen` prop. * @default null */ "show"?: boolean | null; /** * Sets the aria-describedby attribute */ "tdsAriaDescribedby"?: string; /** * In case Tooltip contains only text, no HTML, a text can be passed by this prop * @default '' */ "text"?: string; /** * What triggers the popover to show * @default 'hover' */ "trigger"?: 'click' | 'hover'; } interface TdsAccordionAttributes { "modeVariant": 'primary' | 'secondary' | null; "hideLastBorder": boolean; } interface TdsAccordionItemAttributes { "header": string; "expandIconPosition": 'start' | 'end'; "disabled": boolean; "expanded": boolean; "paddingReset": boolean; "ariaLevelValue": '1' | '2' | '3' | '4' | '5' | '6'; } interface TdsBadgeAttributes { "value": string; "hidden": boolean; "size": 'lg' | 'sm'; "tdsAriaLive": 'off' | 'polite' | 'assertive'; } interface TdsBannerAttributes { "icon": IconNames; "header": string; "subheader": string; "variant": 'error' | 'information' | 'default'; "bannerId": string; "hidden": boolean; "roleType": 'banner' | 'region' | 'alert'; } interface TdsBlockAttributes { "modeVariant": 'primary' | 'secondary' | null; "componentTag": | 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main'; } interface TdsBodyCellAttributes { "cellValue": string; "cellKey": string; "disablePadding": boolean; "textAlign": TextAlign; "colSpan": number; "rowSpan": number; } interface TdsBreadcrumbAttributes { "current": boolean; } interface TdsBreadcrumbsAttributes { "tdsAriaLabel": string; } interface TdsButtonAttributes { "text": string; "type": 'button' | 'submit' | 'reset'; "variant": 'primary' | 'secondary' | 'ghost' | 'danger'; "size": 'xs' | 'sm' | 'md' | 'lg'; "disabled": boolean; "fullbleed": boolean; "modeVariant": 'primary' | 'secondary' | null; "animation": 'none' | 'fade'; "tdsAriaLabel": string; "name": string; "value": string; } interface TdsCardAttributes { "modeVariant": 'primary' | 'secondary' | null; "imagePlacement": 'above-header' | 'below-header'; "header": string; "subheader": string; "bodyImg": string; "bodyImgAlt": string; "bodyDivider": boolean; "clickable": boolean; "stretch": boolean; "cardId": string; "expandable": boolean; "expanded": boolean; } interface TdsCheckboxAttributes { "name": string; "checkboxId": string; "disabled": boolean; "required": boolean; "checked": boolean; "indeterminate": boolean; "value": string; "tdsAriaLabel": string; "tdsAriaDescribedby": string; } interface TdsChipAttributes { "type": 'button' | 'radio' | 'checkbox'; "size": 'sm' | 'lg'; "chipId": string; "checked": boolean; "name": string; "value": string; "disabled": boolean; "tdsAriaLabel": string; } interface TdsDatetimeAttributes { "type": 'datetime-local' | 'date' | 'month' | 'week' | 'time'; "value": string; "min": string; "max": string; "defaultValue": string | 'none'; "disabled": boolean; "size": 'sm' | 'md' | 'lg'; "noMinWidth": boolean; "modeVariant": 'primary' | 'secondary' | null; "name": string; "state": 'none' | 'success' | 'error'; "autofocus": boolean; "label": string; "labelPosition": 'inside' | 'outside' | 'no-label'; "helper": string; "helperError": string; "helperErrorInvalid": string; "tdsAriaLabel": string; } interface TdsDividerAttributes { "orientation": 'horizontal' | 'vertical'; "variant": 'discrete' | 'subtle' | 'soft' | 'defined' | 'dark-blue'; } interface TdsDropdownAttributes { "name": string; "disabled": boolean; "helper": string; "label": string; "labelPosition": 'inside' | 'outside'; "modeVariant": 'primary' | 'secondary' | null; "openDirection": 'up' | 'down' | 'auto'; "placeholder": string; "size": 'xs' | 'sm' | 'md' | 'lg'; "animation": 'none' | 'slide'; "error": boolean; "multiselect": boolean; "filter": boolean; "normalizeText": boolean; "noResultText": string; "defaultValue": string; "value": string; "tdsAriaLabel": string; } interface TdsDropdownOptionAttributes { "value": string; "disabled": boolean; "tdsAriaLabel": string; } interface TdsFolderTabAttributes { "disabled": boolean; } interface TdsFolderTabsAttributes { "modeVariant": 'primary' | 'secondary' | null; "defaultSelectedIndex": number; "selectedIndex": number; "tdsScrollLeftAriaLabel": string; "tdsScrollRightAriaLabel": string; } interface TdsFooterAttributes { "modeVariant": 'primary' | 'secondary' | null; } interface TdsFooterGroupAttributes { "titleText": string; "tdsListAriaLabel": string; } interface TdsHeaderCellAttributes { "cellKey": string; "cellValue": string; "customWidth": string; "sortable": boolean; "textAlign": TextAlign; "disablePadding": boolean; "tdsAriaLabelSortButton": string; "colSpan": number; "rowSpan": number; } interface TdsHeaderDropdownAttributes { "label": string; "noDropdownIcon": boolean; "selected": boolean; "tdsAriaLabel": string; } interface TdsHeaderDropdownListAttributes { "size": 'lg' | 'md'; } interface TdsHeaderDropdownListItemAttributes { "selected": boolean; "size": 'md' | 'lg'; } interface TdsHeaderDropdownListUserAttributes { "imgUrl": string; "imgAlt": string; "header": string; "subheader": string; } interface TdsHeaderHamburgerAttributes { "tdsAriaLabel": string; } interface TdsHeaderItemAttributes { "active": boolean; "selected": boolean; } interface TdsHeaderLauncherAttributes { "tdsAriaLabel": string; } interface TdsHeaderLauncherButtonAttributes { "active": boolean; "tdsAriaLabel": string; } interface TdsIconAttributes { "name": IconNames; "size": string; "svgTitle": string; "tdsAriaHidden": boolean; "svgDescription": string; } interface TdsInlineTabAttributes { "disabled": boolean; } interface TdsInlineTabsAttributes { "modeVariant": 'primary' | 'secondary'; "defaultSelectedIndex": number; "selectedIndex": number; "tdsScrollLeftAriaLabel": string; "tdsScrollRightAriaLabel": string; "leftPadding": number; } interface TdsLinkAttributes { "disabled": boolean; "underline": boolean; "standalone": boolean; } interface TdsMessageAttributes { "header": string; "modeVariant": 'primary' | 'secondary' | null; "variant": 'information' | 'error' | 'warning' | 'success'; "noIcon": boolean; "minimal": boolean; "tdsAlertDialog": 'alertdialog' | 'dialog'; "tdsAriaLabel": string; } interface TdsModalAttributes { "header": string; "prevent": boolean; "size": 'xs' | 'sm' | 'md' | 'lg'; "actionsPosition": 'sticky' | 'static'; "selector": string; "show": boolean; "closable": boolean; "tdsAlertDialog": 'alertdialog' | 'dialog'; } interface TdsNavigationTabAttributes { "disabled": boolean; } interface TdsNavigationTabsAttributes { "modeVariant": 'primary' | 'secondary'; "defaultSelectedIndex": number; "selectedIndex": number; "leftPadding": number; "tdsScrollLeftAriaLabel": string; "tdsScrollRightAriaLabel": string; } interface TdsPopoverCanvasAttributes { "selector": string; "defaultShow": boolean; "show": boolean | null; "placement": Placement; "offsetSkidding": number; "animation": 'none' | 'fade' | string; "offsetDistance": number; "tdsAlertDialog": 'alertdialog' | 'dialog'; "modeVariant": 'primary' | 'secondary' | null; } interface TdsPopoverCoreAttributes { "selector": string; "defaultShow": boolean; "animation": 'none' | 'fade' | string; "show": boolean | null; "placement": Placement; "offsetSkidding": number; "offsetDistance": number; "trigger": 'click' | 'hover' | 'hover-popover'; "autoHide": boolean; } interface TdsPopoverMenuAttributes { "selector": string; "show": boolean | null; "defaultShow": boolean; "placement": Placement; "animation": 'none' | 'fade' | string; "offsetSkidding": number; "offsetDistance": number; "fluidWidth": boolean; "modeVariant": 'primary' | 'secondary' | null; } interface TdsPopoverMenuItemAttributes { "disabled": boolean; } interface TdsRadioButtonAttributes { "name": string; "value": string; "radioId": string; "checked": boolean; "required": boolean; "disabled": boolean; "tdsAriaLabel": string; "tdsTabIndex": number; } interface TdsSideMenuAttributes { "open": boolean; "persistent": boolean; "collapsed": boolean; } interface TdsSideMenuDropdownAttributes { "defaultOpen": boolean; "buttonLabel": string; "selected": boolean; "open": boolean; } interface TdsSideMenuDropdownListItemAttributes { "selected": boolean; } interface TdsSideMenuItemAttributes { "selected": boolean; "active": boolean; } interface TdsSideMenuUserAttributes { "heading": string; "subheading": string; "imgSrc": string; "imgAlt": string; } interface TdsSideMenuUserImageAttributes { "src": string; "alt": string; } interface TdsSideMenuUserLabelAttributes { "heading": string; "subheading": string; } interface TdsSliderAttributes { "label": string; "value": string; "min": string; "max": string; "ticks": string; "showTickNumbers": boolean; "tooltip": boolean; "disabled": boolean; "readOnly": boolean; "controls": boolean; "input": boolean; "step": string; "name": string; "thumbSize": 'sm' | 'lg'; "snap": boolean; "tdsAriaLabel": string; "sliderId": string; "tdsReadOnlyAriaLabel": string; } interface TdsSpinnerAttributes { "size": 'xs' | 'sm' | 'md' | 'lg'; "variant": 'standard' | 'inverted'; } interface TdsStepAttributes { "index": string; "state": 'current' | 'error' | 'success' | 'upcoming'; "tdsAriaCurrent": string; } interface TdsStepperAttributes { "orientation": 'horizontal' | 'vertical'; "labelPosition": 'aside' | 'below'; "size": 'sm' | 'lg'; "hideLabels": boolean; "stepperId": string; "tdsAriaLabel": string; } interface TdsTableAttributes { "verticalDividers": boolean; "compactDesign": boolean; "noMinWidth": boolean; "multiselect": boolean; "expandableRows": boolean; "responsive": boolean; "modeVariant": 'primary' | 'secondary' | null; "zebraMode": | 'rows-odd' | 'rows-even' | 'columns-odd' | 'columns-even' | 'none'; "horizontalScrollWidth": string | null; "tableId": string; } interface TdsTableBodyInputWrapperAttributes { "showIcon": boolean; } interface TdsTableBodyRowAttributes { "selected": boolean; "disabled": boolean; "clickable": boolean; } interface TdsTableBodyRowExpandableAttributes { "colSpan": number | null; "rowId": string; "expanded": boolean; "overflow": 'auto' | 'hidden' | 'visible'; "autoCollapse": boolean; "tdsAriaLabelExpandButton": string; "selected": boolean; "disabled": boolean; } interface TdsTableFooterAttributes { "pagination": boolean; "paginationValue": number; "rowsperpage": boolean; "rowsPerPageDropdownOpenDirection": 'up' | 'down' | 'auto'; "pages": number; "cols": number | null; } interface TdsTableHeaderAttributes { "allSelected": boolean; "selected": boolean; "disabled": boolean; "indeterminate": boolean; } interface TdsTableHeaderInputWrapperAttributes { "showIcon": boolean; "compactDesign": boolean; } interface TdsTableToolbarAttributes { "tableTitle": string; "filter": boolean; "tdsSearchAriaLabel": string; } interface TdsTagAttributes { "text": string; "size": 'lg' | 'sm'; "variant": | 'success' | 'warning' | 'new' | 'neutral' | 'information' | 'error' | 'Success' | 'Warning' | 'New' | 'Neutral' | 'Information' | 'Error'; } interface TdsTextFieldAttributes { "type": 'text' | 'password' | 'number' | 'email' | 'tel'; "labelPosition": 'inside' | 'outside' | 'no-label'; "label": string; "min": string; "max": string; "step": string; "helper": string; "placeholder": string; "value": string; "disabled": boolean; "readOnly": boolean; "hideReadOnlyIcon": boolean; "size": 'sm' | 'md' | 'lg'; "modeVariant": 'primary' | 'secondary' | null; "noMinWidth": boolean; "name": string; "state": 'error' | 'success' | 'default'; "maxLength": number; "autofocus": boolean; "tdsAriaLabel": string; "required": boolean; "autocomplete": string; "hideNumberArrows": boolean; } interface TdsTextareaAttributes { "label": string; "name": string; "helper": string; "cols": number; "rows": number; "labelPosition": 'inside' | 'outside' | 'no-label'; "placeholder": string; "value": string; "disabled": boolean; "readOnly": boolean; "hideReadOnlyIcon": boolean; "state": 'error' | 'success' | 'default'; "maxLength": number; "modeVariant": 'primary' | 'secondary' | null; "autofocus": boolean; "noMinWidth": boolean; "tdsAriaLabel": string; } interface TdsToastAttributes { "toastId": string; "header": string; "subheader": string; "variant": 'information' | 'error' | 'warning' | 'success'; "hidden": boolean; "closable": boolean; "toastRole": 'alert' | 'log' | 'status'; "tdsCloseAriaLabel": string; "tdsAriaLive": 'polite' | 'assertive'; } interface TdsToggleAttributes { "checked": boolean; "required": boolean; "size": 'sm' | 'lg'; "name": string; "headline": string; "disabled": boolean; "toggleId": string; "tdsAriaLabel": string; } interface TdsTooltipAttributes { "text": string; "selector": string; "defaultShow": boolean; "mouseOverTooltip": boolean; "trigger": 'click' | 'hover'; "show": boolean | null; "placement": Placement; "offsetSkidding": number; "offsetDistance": number; "tdsAriaDescribedby": string; } interface IntrinsicElements { "tds-accordion": Omit & { [K in keyof TdsAccordion & keyof TdsAccordionAttributes]?: TdsAccordion[K] } & { [K in keyof TdsAccordion & keyof TdsAccordionAttributes as `attr:${K}`]?: TdsAccordionAttributes[K] } & { [K in keyof TdsAccordion & keyof TdsAccordionAttributes as `prop:${K}`]?: TdsAccordion[K] }; "tds-accordion-item": Omit & { [K in keyof TdsAccordionItem & keyof TdsAccordionItemAttributes]?: TdsAccordionItem[K] } & { [K in keyof TdsAccordionItem & keyof TdsAccordionItemAttributes as `attr:${K}`]?: TdsAccordionItemAttributes[K] } & { [K in keyof TdsAccordionItem & keyof TdsAccordionItemAttributes as `prop:${K}`]?: TdsAccordionItem[K] }; "tds-badge": Omit & { [K in keyof TdsBadge & keyof TdsBadgeAttributes]?: TdsBadge[K] } & { [K in keyof TdsBadge & keyof TdsBadgeAttributes as `attr:${K}`]?: TdsBadgeAttributes[K] } & { [K in keyof TdsBadge & keyof TdsBadgeAttributes as `prop:${K}`]?: TdsBadge[K] }; "tds-banner": Omit & { [K in keyof TdsBanner & keyof TdsBannerAttributes]?: TdsBanner[K] } & { [K in keyof TdsBanner & keyof TdsBannerAttributes as `attr:${K}`]?: TdsBannerAttributes[K] } & { [K in keyof TdsBanner & keyof TdsBannerAttributes as `prop:${K}`]?: TdsBanner[K] }; "tds-block": Omit & { [K in keyof TdsBlock & keyof TdsBlockAttributes]?: TdsBlock[K] } & { [K in keyof TdsBlock & keyof TdsBlockAttributes as `attr:${K}`]?: TdsBlockAttributes[K] } & { [K in keyof TdsBlock & keyof TdsBlockAttributes as `prop:${K}`]?: TdsBlock[K] }; "tds-body-cell": Omit & { [K in keyof TdsBodyCell & keyof TdsBodyCellAttributes]?: TdsBodyCell[K] } & { [K in keyof TdsBodyCell & keyof TdsBodyCellAttributes as `attr:${K}`]?: TdsBodyCellAttributes[K] } & { [K in keyof TdsBodyCell & keyof TdsBodyCellAttributes as `prop:${K}`]?: TdsBodyCell[K] }; "tds-breadcrumb": Omit & { [K in keyof TdsBreadcrumb & keyof TdsBreadcrumbAttributes]?: TdsBreadcrumb[K] } & { [K in keyof TdsBreadcrumb & keyof TdsBreadcrumbAttributes as `attr:${K}`]?: TdsBreadcrumbAttributes[K] } & { [K in keyof TdsBreadcrumb & keyof TdsBreadcrumbAttributes as `prop:${K}`]?: TdsBreadcrumb[K] }; "tds-breadcrumbs": Omit & { [K in keyof TdsBreadcrumbs & keyof TdsBreadcrumbsAttributes]?: TdsBreadcrumbs[K] } & { [K in keyof TdsBreadcrumbs & keyof TdsBreadcrumbsAttributes as `attr:${K}`]?: TdsBreadcrumbsAttributes[K] } & { [K in keyof TdsBreadcrumbs & keyof TdsBreadcrumbsAttributes as `prop:${K}`]?: TdsBreadcrumbs[K] }; "tds-button": Omit & { [K in keyof TdsButton & keyof TdsButtonAttributes]?: TdsButton[K] } & { [K in keyof TdsButton & keyof TdsButtonAttributes as `attr:${K}`]?: TdsButtonAttributes[K] } & { [K in keyof TdsButton & keyof TdsButtonAttributes as `prop:${K}`]?: TdsButton[K] }; "tds-card": Omit & { [K in keyof TdsCard & keyof TdsCardAttributes]?: TdsCard[K] } & { [K in keyof TdsCard & keyof TdsCardAttributes as `attr:${K}`]?: TdsCardAttributes[K] } & { [K in keyof TdsCard & keyof TdsCardAttributes as `prop:${K}`]?: TdsCard[K] }; "tds-checkbox": Omit & { [K in keyof TdsCheckbox & keyof TdsCheckboxAttributes]?: TdsCheckbox[K] } & { [K in keyof TdsCheckbox & keyof TdsCheckboxAttributes as `attr:${K}`]?: TdsCheckboxAttributes[K] } & { [K in keyof TdsCheckbox & keyof TdsCheckboxAttributes as `prop:${K}`]?: TdsCheckbox[K] }; "tds-chip": Omit & { [K in keyof TdsChip & keyof TdsChipAttributes]?: TdsChip[K] } & { [K in keyof TdsChip & keyof TdsChipAttributes as `attr:${K}`]?: TdsChipAttributes[K] } & { [K in keyof TdsChip & keyof TdsChipAttributes as `prop:${K}`]?: TdsChip[K] }; "tds-core-header-item": TdsCoreHeaderItem; "tds-datetime": Omit & { [K in keyof TdsDatetime & keyof TdsDatetimeAttributes]?: TdsDatetime[K] } & { [K in keyof TdsDatetime & keyof TdsDatetimeAttributes as `attr:${K}`]?: TdsDatetimeAttributes[K] } & { [K in keyof TdsDatetime & keyof TdsDatetimeAttributes as `prop:${K}`]?: TdsDatetime[K] }; "tds-divider": Omit & { [K in keyof TdsDivider & keyof TdsDividerAttributes]?: TdsDivider[K] } & { [K in keyof TdsDivider & keyof TdsDividerAttributes as `attr:${K}`]?: TdsDividerAttributes[K] } & { [K in keyof TdsDivider & keyof TdsDividerAttributes as `prop:${K}`]?: TdsDivider[K] }; "tds-dropdown": Omit & { [K in keyof TdsDropdown & keyof TdsDropdownAttributes]?: TdsDropdown[K] } & { [K in keyof TdsDropdown & keyof TdsDropdownAttributes as `attr:${K}`]?: TdsDropdownAttributes[K] } & { [K in keyof TdsDropdown & keyof TdsDropdownAttributes as `prop:${K}`]?: TdsDropdown[K] }; "tds-dropdown-option": Omit & { [K in keyof TdsDropdownOption & keyof TdsDropdownOptionAttributes]?: TdsDropdownOption[K] } & { [K in keyof TdsDropdownOption & keyof TdsDropdownOptionAttributes as `attr:${K}`]?: TdsDropdownOptionAttributes[K] } & { [K in keyof TdsDropdownOption & keyof TdsDropdownOptionAttributes as `prop:${K}`]?: TdsDropdownOption[K] }; "tds-folder-tab": Omit & { [K in keyof TdsFolderTab & keyof TdsFolderTabAttributes]?: TdsFolderTab[K] } & { [K in keyof TdsFolderTab & keyof TdsFolderTabAttributes as `attr:${K}`]?: TdsFolderTabAttributes[K] } & { [K in keyof TdsFolderTab & keyof TdsFolderTabAttributes as `prop:${K}`]?: TdsFolderTab[K] }; "tds-folder-tabs": Omit & { [K in keyof TdsFolderTabs & keyof TdsFolderTabsAttributes]?: TdsFolderTabs[K] } & { [K in keyof TdsFolderTabs & keyof TdsFolderTabsAttributes as `attr:${K}`]?: TdsFolderTabsAttributes[K] } & { [K in keyof TdsFolderTabs & keyof TdsFolderTabsAttributes as `prop:${K}`]?: TdsFolderTabs[K] }; "tds-footer": Omit & { [K in keyof TdsFooter & keyof TdsFooterAttributes]?: TdsFooter[K] } & { [K in keyof TdsFooter & keyof TdsFooterAttributes as `attr:${K}`]?: TdsFooterAttributes[K] } & { [K in keyof TdsFooter & keyof TdsFooterAttributes as `prop:${K}`]?: TdsFooter[K] }; "tds-footer-group": Omit & { [K in keyof TdsFooterGroup & keyof TdsFooterGroupAttributes]?: TdsFooterGroup[K] } & { [K in keyof TdsFooterGroup & keyof TdsFooterGroupAttributes as `attr:${K}`]?: TdsFooterGroupAttributes[K] } & { [K in keyof TdsFooterGroup & keyof TdsFooterGroupAttributes as `prop:${K}`]?: TdsFooterGroup[K] }; "tds-footer-item": TdsFooterItem; "tds-header": TdsHeader; "tds-header-brand-symbol": TdsHeaderBrandSymbol; "tds-header-cell": Omit & { [K in keyof TdsHeaderCell & keyof TdsHeaderCellAttributes]?: TdsHeaderCell[K] } & { [K in keyof TdsHeaderCell & keyof TdsHeaderCellAttributes as `attr:${K}`]?: TdsHeaderCellAttributes[K] } & { [K in keyof TdsHeaderCell & keyof TdsHeaderCellAttributes as `prop:${K}`]?: TdsHeaderCell[K] }; "tds-header-dropdown": Omit & { [K in keyof TdsHeaderDropdown & keyof TdsHeaderDropdownAttributes]?: TdsHeaderDropdown[K] } & { [K in keyof TdsHeaderDropdown & keyof TdsHeaderDropdownAttributes as `attr:${K}`]?: TdsHeaderDropdownAttributes[K] } & { [K in keyof TdsHeaderDropdown & keyof TdsHeaderDropdownAttributes as `prop:${K}`]?: TdsHeaderDropdown[K] }; "tds-header-dropdown-list": Omit & { [K in keyof TdsHeaderDropdownList & keyof TdsHeaderDropdownListAttributes]?: TdsHeaderDropdownList[K] } & { [K in keyof TdsHeaderDropdownList & keyof TdsHeaderDropdownListAttributes as `attr:${K}`]?: TdsHeaderDropdownListAttributes[K] } & { [K in keyof TdsHeaderDropdownList & keyof TdsHeaderDropdownListAttributes as `prop:${K}`]?: TdsHeaderDropdownList[K] }; "tds-header-dropdown-list-item": Omit & { [K in keyof TdsHeaderDropdownListItem & keyof TdsHeaderDropdownListItemAttributes]?: TdsHeaderDropdownListItem[K] } & { [K in keyof TdsHeaderDropdownListItem & keyof TdsHeaderDropdownListItemAttributes as `attr:${K}`]?: TdsHeaderDropdownListItemAttributes[K] } & { [K in keyof TdsHeaderDropdownListItem & keyof TdsHeaderDropdownListItemAttributes as `prop:${K}`]?: TdsHeaderDropdownListItem[K] }; "tds-header-dropdown-list-user": Omit & { [K in keyof TdsHeaderDropdownListUser & keyof TdsHeaderDropdownListUserAttributes]?: TdsHeaderDropdownListUser[K] } & { [K in keyof TdsHeaderDropdownListUser & keyof TdsHeaderDropdownListUserAttributes as `attr:${K}`]?: TdsHeaderDropdownListUserAttributes[K] } & { [K in keyof TdsHeaderDropdownListUser & keyof TdsHeaderDropdownListUserAttributes as `prop:${K}`]?: TdsHeaderDropdownListUser[K] }; "tds-header-hamburger": Omit & { [K in keyof TdsHeaderHamburger & keyof TdsHeaderHamburgerAttributes]?: TdsHeaderHamburger[K] } & { [K in keyof TdsHeaderHamburger & keyof TdsHeaderHamburgerAttributes as `attr:${K}`]?: TdsHeaderHamburgerAttributes[K] } & { [K in keyof TdsHeaderHamburger & keyof TdsHeaderHamburgerAttributes as `prop:${K}`]?: TdsHeaderHamburger[K] }; "tds-header-item": Omit & { [K in keyof TdsHeaderItem & keyof TdsHeaderItemAttributes]?: TdsHeaderItem[K] } & { [K in keyof TdsHeaderItem & keyof TdsHeaderItemAttributes as `attr:${K}`]?: TdsHeaderItemAttributes[K] } & { [K in keyof TdsHeaderItem & keyof TdsHeaderItemAttributes as `prop:${K}`]?: TdsHeaderItem[K] }; "tds-header-launcher": Omit & { [K in keyof TdsHeaderLauncher & keyof TdsHeaderLauncherAttributes]?: TdsHeaderLauncher[K] } & { [K in keyof TdsHeaderLauncher & keyof TdsHeaderLauncherAttributes as `attr:${K}`]?: TdsHeaderLauncherAttributes[K] } & { [K in keyof TdsHeaderLauncher & keyof TdsHeaderLauncherAttributes as `prop:${K}`]?: TdsHeaderLauncher[K] }; "tds-header-launcher-button": Omit & { [K in keyof TdsHeaderLauncherButton & keyof TdsHeaderLauncherButtonAttributes]?: TdsHeaderLauncherButton[K] } & { [K in keyof TdsHeaderLauncherButton & keyof TdsHeaderLauncherButtonAttributes as `attr:${K}`]?: TdsHeaderLauncherButtonAttributes[K] } & { [K in keyof TdsHeaderLauncherButton & keyof TdsHeaderLauncherButtonAttributes as `prop:${K}`]?: TdsHeaderLauncherButton[K] }; "tds-header-launcher-grid": TdsHeaderLauncherGrid; "tds-header-launcher-grid-item": TdsHeaderLauncherGridItem; "tds-header-launcher-grid-title": TdsHeaderLauncherGridTitle; "tds-header-launcher-list": TdsHeaderLauncherList; "tds-header-launcher-list-item": TdsHeaderLauncherListItem; "tds-header-launcher-list-title": TdsHeaderLauncherListTitle; "tds-header-title": TdsHeaderTitle; "tds-icon": Omit & { [K in keyof TdsIcon & keyof TdsIconAttributes]?: TdsIcon[K] } & { [K in keyof TdsIcon & keyof TdsIconAttributes as `attr:${K}`]?: TdsIconAttributes[K] } & { [K in keyof TdsIcon & keyof TdsIconAttributes as `prop:${K}`]?: TdsIcon[K] }; "tds-inline-tab": Omit & { [K in keyof TdsInlineTab & keyof TdsInlineTabAttributes]?: TdsInlineTab[K] } & { [K in keyof TdsInlineTab & keyof TdsInlineTabAttributes as `attr:${K}`]?: TdsInlineTabAttributes[K] } & { [K in keyof TdsInlineTab & keyof TdsInlineTabAttributes as `prop:${K}`]?: TdsInlineTab[K] }; "tds-inline-tabs": Omit & { [K in keyof TdsInlineTabs & keyof TdsInlineTabsAttributes]?: TdsInlineTabs[K] } & { [K in keyof TdsInlineTabs & keyof TdsInlineTabsAttributes as `attr:${K}`]?: TdsInlineTabsAttributes[K] } & { [K in keyof TdsInlineTabs & keyof TdsInlineTabsAttributes as `prop:${K}`]?: TdsInlineTabs[K] }; "tds-link": Omit & { [K in keyof TdsLink & keyof TdsLinkAttributes]?: TdsLink[K] } & { [K in keyof TdsLink & keyof TdsLinkAttributes as `attr:${K}`]?: TdsLinkAttributes[K] } & { [K in keyof TdsLink & keyof TdsLinkAttributes as `prop:${K}`]?: TdsLink[K] }; "tds-message": Omit & { [K in keyof TdsMessage & keyof TdsMessageAttributes]?: TdsMessage[K] } & { [K in keyof TdsMessage & keyof TdsMessageAttributes as `attr:${K}`]?: TdsMessageAttributes[K] } & { [K in keyof TdsMessage & keyof TdsMessageAttributes as `prop:${K}`]?: TdsMessage[K] }; "tds-modal": Omit & { [K in keyof TdsModal & keyof TdsModalAttributes]?: TdsModal[K] } & { [K in keyof TdsModal & keyof TdsModalAttributes as `attr:${K}`]?: TdsModalAttributes[K] } & { [K in keyof TdsModal & keyof TdsModalAttributes as `prop:${K}`]?: TdsModal[K] }; "tds-navigation-tab": Omit & { [K in keyof TdsNavigationTab & keyof TdsNavigationTabAttributes]?: TdsNavigationTab[K] } & { [K in keyof TdsNavigationTab & keyof TdsNavigationTabAttributes as `attr:${K}`]?: TdsNavigationTabAttributes[K] } & { [K in keyof TdsNavigationTab & keyof TdsNavigationTabAttributes as `prop:${K}`]?: TdsNavigationTab[K] }; "tds-navigation-tabs": Omit & { [K in keyof TdsNavigationTabs & keyof TdsNavigationTabsAttributes]?: TdsNavigationTabs[K] } & { [K in keyof TdsNavigationTabs & keyof TdsNavigationTabsAttributes as `attr:${K}`]?: TdsNavigationTabsAttributes[K] } & { [K in keyof TdsNavigationTabs & keyof TdsNavigationTabsAttributes as `prop:${K}`]?: TdsNavigationTabs[K] }; "tds-popover-canvas": Omit & { [K in keyof TdsPopoverCanvas & keyof TdsPopoverCanvasAttributes]?: TdsPopoverCanvas[K] } & { [K in keyof TdsPopoverCanvas & keyof TdsPopoverCanvasAttributes as `attr:${K}`]?: TdsPopoverCanvasAttributes[K] } & { [K in keyof TdsPopoverCanvas & keyof TdsPopoverCanvasAttributes as `prop:${K}`]?: TdsPopoverCanvas[K] }; "tds-popover-core": Omit & { [K in keyof TdsPopoverCore & keyof TdsPopoverCoreAttributes]?: TdsPopoverCore[K] } & { [K in keyof TdsPopoverCore & keyof TdsPopoverCoreAttributes as `attr:${K}`]?: TdsPopoverCoreAttributes[K] } & { [K in keyof TdsPopoverCore & keyof TdsPopoverCoreAttributes as `prop:${K}`]?: TdsPopoverCore[K] }; "tds-popover-menu": Omit & { [K in keyof TdsPopoverMenu & keyof TdsPopoverMenuAttributes]?: TdsPopoverMenu[K] } & { [K in keyof TdsPopoverMenu & keyof TdsPopoverMenuAttributes as `attr:${K}`]?: TdsPopoverMenuAttributes[K] } & { [K in keyof TdsPopoverMenu & keyof TdsPopoverMenuAttributes as `prop:${K}`]?: TdsPopoverMenu[K] }; "tds-popover-menu-item": Omit & { [K in keyof TdsPopoverMenuItem & keyof TdsPopoverMenuItemAttributes]?: TdsPopoverMenuItem[K] } & { [K in keyof TdsPopoverMenuItem & keyof TdsPopoverMenuItemAttributes as `attr:${K}`]?: TdsPopoverMenuItemAttributes[K] } & { [K in keyof TdsPopoverMenuItem & keyof TdsPopoverMenuItemAttributes as `prop:${K}`]?: TdsPopoverMenuItem[K] }; "tds-radio-button": Omit & { [K in keyof TdsRadioButton & keyof TdsRadioButtonAttributes]?: TdsRadioButton[K] } & { [K in keyof TdsRadioButton & keyof TdsRadioButtonAttributes as `attr:${K}`]?: TdsRadioButtonAttributes[K] } & { [K in keyof TdsRadioButton & keyof TdsRadioButtonAttributes as `prop:${K}`]?: TdsRadioButton[K] }; "tds-side-menu": Omit & { [K in keyof TdsSideMenu & keyof TdsSideMenuAttributes]?: TdsSideMenu[K] } & { [K in keyof TdsSideMenu & keyof TdsSideMenuAttributes as `attr:${K}`]?: TdsSideMenuAttributes[K] } & { [K in keyof TdsSideMenu & keyof TdsSideMenuAttributes as `prop:${K}`]?: TdsSideMenu[K] }; "tds-side-menu-close-button": TdsSideMenuCloseButton; "tds-side-menu-collapse-button": TdsSideMenuCollapseButton; "tds-side-menu-dropdown": Omit & { [K in keyof TdsSideMenuDropdown & keyof TdsSideMenuDropdownAttributes]?: TdsSideMenuDropdown[K] } & { [K in keyof TdsSideMenuDropdown & keyof TdsSideMenuDropdownAttributes as `attr:${K}`]?: TdsSideMenuDropdownAttributes[K] } & { [K in keyof TdsSideMenuDropdown & keyof TdsSideMenuDropdownAttributes as `prop:${K}`]?: TdsSideMenuDropdown[K] }; "tds-side-menu-dropdown-list": TdsSideMenuDropdownList; "tds-side-menu-dropdown-list-item": Omit & { [K in keyof TdsSideMenuDropdownListItem & keyof TdsSideMenuDropdownListItemAttributes]?: TdsSideMenuDropdownListItem[K] } & { [K in keyof TdsSideMenuDropdownListItem & keyof TdsSideMenuDropdownListItemAttributes as `attr:${K}`]?: TdsSideMenuDropdownListItemAttributes[K] } & { [K in keyof TdsSideMenuDropdownListItem & keyof TdsSideMenuDropdownListItemAttributes as `prop:${K}`]?: TdsSideMenuDropdownListItem[K] }; "tds-side-menu-item": Omit & { [K in keyof TdsSideMenuItem & keyof TdsSideMenuItemAttributes]?: TdsSideMenuItem[K] } & { [K in keyof TdsSideMenuItem & keyof TdsSideMenuItemAttributes as `attr:${K}`]?: TdsSideMenuItemAttributes[K] } & { [K in keyof TdsSideMenuItem & keyof TdsSideMenuItemAttributes as `prop:${K}`]?: TdsSideMenuItem[K] }; "tds-side-menu-overlay": TdsSideMenuOverlay; "tds-side-menu-user": Omit & { [K in keyof TdsSideMenuUser & keyof TdsSideMenuUserAttributes]?: TdsSideMenuUser[K] } & { [K in keyof TdsSideMenuUser & keyof TdsSideMenuUserAttributes as `attr:${K}`]?: TdsSideMenuUserAttributes[K] } & { [K in keyof TdsSideMenuUser & keyof TdsSideMenuUserAttributes as `prop:${K}`]?: TdsSideMenuUser[K] } & OneOf<"heading", TdsSideMenuUser["heading"], TdsSideMenuUserAttributes["heading"]>; "tds-side-menu-user-image": Omit & { [K in keyof TdsSideMenuUserImage & keyof TdsSideMenuUserImageAttributes]?: TdsSideMenuUserImage[K] } & { [K in keyof TdsSideMenuUserImage & keyof TdsSideMenuUserImageAttributes as `attr:${K}`]?: TdsSideMenuUserImageAttributes[K] } & { [K in keyof TdsSideMenuUserImage & keyof TdsSideMenuUserImageAttributes as `prop:${K}`]?: TdsSideMenuUserImage[K] }; "tds-side-menu-user-label": Omit & { [K in keyof TdsSideMenuUserLabel & keyof TdsSideMenuUserLabelAttributes]?: TdsSideMenuUserLabel[K] } & { [K in keyof TdsSideMenuUserLabel & keyof TdsSideMenuUserLabelAttributes as `attr:${K}`]?: TdsSideMenuUserLabelAttributes[K] } & { [K in keyof TdsSideMenuUserLabel & keyof TdsSideMenuUserLabelAttributes as `prop:${K}`]?: TdsSideMenuUserLabel[K] } & OneOf<"heading", TdsSideMenuUserLabel["heading"], TdsSideMenuUserLabelAttributes["heading"]>; "tds-slider": Omit & { [K in keyof TdsSlider & keyof TdsSliderAttributes]?: TdsSlider[K] } & { [K in keyof TdsSlider & keyof TdsSliderAttributes as `attr:${K}`]?: TdsSliderAttributes[K] } & { [K in keyof TdsSlider & keyof TdsSliderAttributes as `prop:${K}`]?: TdsSlider[K] }; "tds-spinner": Omit & { [K in keyof TdsSpinner & keyof TdsSpinnerAttributes]?: TdsSpinner[K] } & { [K in keyof TdsSpinner & keyof TdsSpinnerAttributes as `attr:${K}`]?: TdsSpinnerAttributes[K] } & { [K in keyof TdsSpinner & keyof TdsSpinnerAttributes as `prop:${K}`]?: TdsSpinner[K] }; "tds-step": Omit & { [K in keyof TdsStep & keyof TdsStepAttributes]?: TdsStep[K] } & { [K in keyof TdsStep & keyof TdsStepAttributes as `attr:${K}`]?: TdsStepAttributes[K] } & { [K in keyof TdsStep & keyof TdsStepAttributes as `prop:${K}`]?: TdsStep[K] }; "tds-stepper": Omit & { [K in keyof TdsStepper & keyof TdsStepperAttributes]?: TdsStepper[K] } & { [K in keyof TdsStepper & keyof TdsStepperAttributes as `attr:${K}`]?: TdsStepperAttributes[K] } & { [K in keyof TdsStepper & keyof TdsStepperAttributes as `prop:${K}`]?: TdsStepper[K] }; "tds-table": Omit & { [K in keyof TdsTable & keyof TdsTableAttributes]?: TdsTable[K] } & { [K in keyof TdsTable & keyof TdsTableAttributes as `attr:${K}`]?: TdsTableAttributes[K] } & { [K in keyof TdsTable & keyof TdsTableAttributes as `prop:${K}`]?: TdsTable[K] }; "tds-table-body": TdsTableBody; "tds-table-body-input-wrapper": Omit & { [K in keyof TdsTableBodyInputWrapper & keyof TdsTableBodyInputWrapperAttributes]?: TdsTableBodyInputWrapper[K] } & { [K in keyof TdsTableBodyInputWrapper & keyof TdsTableBodyInputWrapperAttributes as `attr:${K}`]?: TdsTableBodyInputWrapperAttributes[K] } & { [K in keyof TdsTableBodyInputWrapper & keyof TdsTableBodyInputWrapperAttributes as `prop:${K}`]?: TdsTableBodyInputWrapper[K] }; "tds-table-body-row": Omit & { [K in keyof TdsTableBodyRow & keyof TdsTableBodyRowAttributes]?: TdsTableBodyRow[K] } & { [K in keyof TdsTableBodyRow & keyof TdsTableBodyRowAttributes as `attr:${K}`]?: TdsTableBodyRowAttributes[K] } & { [K in keyof TdsTableBodyRow & keyof TdsTableBodyRowAttributes as `prop:${K}`]?: TdsTableBodyRow[K] }; "tds-table-body-row-expandable": Omit & { [K in keyof TdsTableBodyRowExpandable & keyof TdsTableBodyRowExpandableAttributes]?: TdsTableBodyRowExpandable[K] } & { [K in keyof TdsTableBodyRowExpandable & keyof TdsTableBodyRowExpandableAttributes as `attr:${K}`]?: TdsTableBodyRowExpandableAttributes[K] } & { [K in keyof TdsTableBodyRowExpandable & keyof TdsTableBodyRowExpandableAttributes as `prop:${K}`]?: TdsTableBodyRowExpandable[K] }; "tds-table-footer": Omit & { [K in keyof TdsTableFooter & keyof TdsTableFooterAttributes]?: TdsTableFooter[K] } & { [K in keyof TdsTableFooter & keyof TdsTableFooterAttributes as `attr:${K}`]?: TdsTableFooterAttributes[K] } & { [K in keyof TdsTableFooter & keyof TdsTableFooterAttributes as `prop:${K}`]?: TdsTableFooter[K] }; "tds-table-header": Omit & { [K in keyof TdsTableHeader & keyof TdsTableHeaderAttributes]?: TdsTableHeader[K] } & { [K in keyof TdsTableHeader & keyof TdsTableHeaderAttributes as `attr:${K}`]?: TdsTableHeaderAttributes[K] } & { [K in keyof TdsTableHeader & keyof TdsTableHeaderAttributes as `prop:${K}`]?: TdsTableHeader[K] }; "tds-table-header-input-wrapper": Omit & { [K in keyof TdsTableHeaderInputWrapper & keyof TdsTableHeaderInputWrapperAttributes]?: TdsTableHeaderInputWrapper[K] } & { [K in keyof TdsTableHeaderInputWrapper & keyof TdsTableHeaderInputWrapperAttributes as `attr:${K}`]?: TdsTableHeaderInputWrapperAttributes[K] } & { [K in keyof TdsTableHeaderInputWrapper & keyof TdsTableHeaderInputWrapperAttributes as `prop:${K}`]?: TdsTableHeaderInputWrapper[K] }; "tds-table-toolbar": Omit & { [K in keyof TdsTableToolbar & keyof TdsTableToolbarAttributes]?: TdsTableToolbar[K] } & { [K in keyof TdsTableToolbar & keyof TdsTableToolbarAttributes as `attr:${K}`]?: TdsTableToolbarAttributes[K] } & { [K in keyof TdsTableToolbar & keyof TdsTableToolbarAttributes as `prop:${K}`]?: TdsTableToolbar[K] }; "tds-tag": Omit & { [K in keyof TdsTag & keyof TdsTagAttributes]?: TdsTag[K] } & { [K in keyof TdsTag & keyof TdsTagAttributes as `attr:${K}`]?: TdsTagAttributes[K] } & { [K in keyof TdsTag & keyof TdsTagAttributes as `prop:${K}`]?: TdsTag[K] } & OneOf<"text", TdsTag["text"], TdsTagAttributes["text"]>; "tds-text-field": Omit & { [K in keyof TdsTextField & keyof TdsTextFieldAttributes]?: TdsTextField[K] } & { [K in keyof TdsTextField & keyof TdsTextFieldAttributes as `attr:${K}`]?: TdsTextFieldAttributes[K] } & { [K in keyof TdsTextField & keyof TdsTextFieldAttributes as `prop:${K}`]?: TdsTextField[K] }; "tds-textarea": Omit & { [K in keyof TdsTextarea & keyof TdsTextareaAttributes]?: TdsTextarea[K] } & { [K in keyof TdsTextarea & keyof TdsTextareaAttributes as `attr:${K}`]?: TdsTextareaAttributes[K] } & { [K in keyof TdsTextarea & keyof TdsTextareaAttributes as `prop:${K}`]?: TdsTextarea[K] }; "tds-toast": Omit & { [K in keyof TdsToast & keyof TdsToastAttributes]?: TdsToast[K] } & { [K in keyof TdsToast & keyof TdsToastAttributes as `attr:${K}`]?: TdsToastAttributes[K] } & { [K in keyof TdsToast & keyof TdsToastAttributes as `prop:${K}`]?: TdsToast[K] }; "tds-toggle": Omit & { [K in keyof TdsToggle & keyof TdsToggleAttributes]?: TdsToggle[K] } & { [K in keyof TdsToggle & keyof TdsToggleAttributes as `attr:${K}`]?: TdsToggleAttributes[K] } & { [K in keyof TdsToggle & keyof TdsToggleAttributes as `prop:${K}`]?: TdsToggle[K] }; "tds-tooltip": Omit & { [K in keyof TdsTooltip & keyof TdsTooltipAttributes]?: TdsTooltip[K] } & { [K in keyof TdsTooltip & keyof TdsTooltipAttributes as `attr:${K}`]?: TdsTooltipAttributes[K] } & { [K in keyof TdsTooltip & keyof TdsTooltipAttributes as `prop:${K}`]?: TdsTooltip[K] }; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "tds-accordion": LocalJSX.IntrinsicElements["tds-accordion"] & JSXBase.HTMLAttributes; "tds-accordion-item": LocalJSX.IntrinsicElements["tds-accordion-item"] & JSXBase.HTMLAttributes; "tds-badge": LocalJSX.IntrinsicElements["tds-badge"] & JSXBase.HTMLAttributes; "tds-banner": LocalJSX.IntrinsicElements["tds-banner"] & JSXBase.HTMLAttributes; /** * @example *
Semantic section content
*
*/ "tds-block": LocalJSX.IntrinsicElements["tds-block"] & JSXBase.HTMLAttributes; "tds-body-cell": LocalJSX.IntrinsicElements["tds-body-cell"] & JSXBase.HTMLAttributes; "tds-breadcrumb": LocalJSX.IntrinsicElements["tds-breadcrumb"] & JSXBase.HTMLAttributes; "tds-breadcrumbs": LocalJSX.IntrinsicElements["tds-breadcrumbs"] & JSXBase.HTMLAttributes; "tds-button": LocalJSX.IntrinsicElements["tds-button"] & JSXBase.HTMLAttributes; "tds-card": LocalJSX.IntrinsicElements["tds-card"] & JSXBase.HTMLAttributes; "tds-checkbox": LocalJSX.IntrinsicElements["tds-checkbox"] & JSXBase.HTMLAttributes; "tds-chip": LocalJSX.IntrinsicElements["tds-chip"] & JSXBase.HTMLAttributes; "tds-core-header-item": LocalJSX.IntrinsicElements["tds-core-header-item"] & JSXBase.HTMLAttributes; "tds-datetime": LocalJSX.IntrinsicElements["tds-datetime"] & JSXBase.HTMLAttributes; "tds-divider": LocalJSX.IntrinsicElements["tds-divider"] & JSXBase.HTMLAttributes; "tds-dropdown": LocalJSX.IntrinsicElements["tds-dropdown"] & JSXBase.HTMLAttributes; "tds-dropdown-option": LocalJSX.IntrinsicElements["tds-dropdown-option"] & JSXBase.HTMLAttributes; "tds-folder-tab": LocalJSX.IntrinsicElements["tds-folder-tab"] & JSXBase.HTMLAttributes; "tds-folder-tabs": LocalJSX.IntrinsicElements["tds-folder-tabs"] & JSXBase.HTMLAttributes; "tds-footer": LocalJSX.IntrinsicElements["tds-footer"] & JSXBase.HTMLAttributes; "tds-footer-group": LocalJSX.IntrinsicElements["tds-footer-group"] & JSXBase.HTMLAttributes; "tds-footer-item": LocalJSX.IntrinsicElements["tds-footer-item"] & JSXBase.HTMLAttributes; "tds-header": LocalJSX.IntrinsicElements["tds-header"] & JSXBase.HTMLAttributes; "tds-header-brand-symbol": LocalJSX.IntrinsicElements["tds-header-brand-symbol"] & JSXBase.HTMLAttributes; "tds-header-cell": LocalJSX.IntrinsicElements["tds-header-cell"] & JSXBase.HTMLAttributes; "tds-header-dropdown": LocalJSX.IntrinsicElements["tds-header-dropdown"] & JSXBase.HTMLAttributes; "tds-header-dropdown-list": LocalJSX.IntrinsicElements["tds-header-dropdown-list"] & JSXBase.HTMLAttributes; "tds-header-dropdown-list-item": LocalJSX.IntrinsicElements["tds-header-dropdown-list-item"] & JSXBase.HTMLAttributes; "tds-header-dropdown-list-user": LocalJSX.IntrinsicElements["tds-header-dropdown-list-user"] & JSXBase.HTMLAttributes; "tds-header-hamburger": LocalJSX.IntrinsicElements["tds-header-hamburger"] & JSXBase.HTMLAttributes; "tds-header-item": LocalJSX.IntrinsicElements["tds-header-item"] & JSXBase.HTMLAttributes; "tds-header-launcher": LocalJSX.IntrinsicElements["tds-header-launcher"] & JSXBase.HTMLAttributes; "tds-header-launcher-button": LocalJSX.IntrinsicElements["tds-header-launcher-button"] & JSXBase.HTMLAttributes; "tds-header-launcher-grid": LocalJSX.IntrinsicElements["tds-header-launcher-grid"] & JSXBase.HTMLAttributes; "tds-header-launcher-grid-item": LocalJSX.IntrinsicElements["tds-header-launcher-grid-item"] & JSXBase.HTMLAttributes; "tds-header-launcher-grid-title": LocalJSX.IntrinsicElements["tds-header-launcher-grid-title"] & JSXBase.HTMLAttributes; "tds-header-launcher-list": LocalJSX.IntrinsicElements["tds-header-launcher-list"] & JSXBase.HTMLAttributes; "tds-header-launcher-list-item": LocalJSX.IntrinsicElements["tds-header-launcher-list-item"] & JSXBase.HTMLAttributes; "tds-header-launcher-list-title": LocalJSX.IntrinsicElements["tds-header-launcher-list-title"] & JSXBase.HTMLAttributes; "tds-header-title": LocalJSX.IntrinsicElements["tds-header-title"] & JSXBase.HTMLAttributes; "tds-icon": LocalJSX.IntrinsicElements["tds-icon"] & JSXBase.HTMLAttributes; "tds-inline-tab": LocalJSX.IntrinsicElements["tds-inline-tab"] & JSXBase.HTMLAttributes; "tds-inline-tabs": LocalJSX.IntrinsicElements["tds-inline-tabs"] & JSXBase.HTMLAttributes; "tds-link": LocalJSX.IntrinsicElements["tds-link"] & JSXBase.HTMLAttributes; "tds-message": LocalJSX.IntrinsicElements["tds-message"] & JSXBase.HTMLAttributes; "tds-modal": LocalJSX.IntrinsicElements["tds-modal"] & JSXBase.HTMLAttributes; "tds-navigation-tab": LocalJSX.IntrinsicElements["tds-navigation-tab"] & JSXBase.HTMLAttributes; "tds-navigation-tabs": LocalJSX.IntrinsicElements["tds-navigation-tabs"] & JSXBase.HTMLAttributes; "tds-popover-canvas": LocalJSX.IntrinsicElements["tds-popover-canvas"] & JSXBase.HTMLAttributes; "tds-popover-core": LocalJSX.IntrinsicElements["tds-popover-core"] & JSXBase.HTMLAttributes; "tds-popover-menu": LocalJSX.IntrinsicElements["tds-popover-menu"] & JSXBase.HTMLAttributes; "tds-popover-menu-item": LocalJSX.IntrinsicElements["tds-popover-menu-item"] & JSXBase.HTMLAttributes; "tds-radio-button": LocalJSX.IntrinsicElements["tds-radio-button"] & JSXBase.HTMLAttributes; "tds-side-menu": LocalJSX.IntrinsicElements["tds-side-menu"] & JSXBase.HTMLAttributes; "tds-side-menu-close-button": LocalJSX.IntrinsicElements["tds-side-menu-close-button"] & JSXBase.HTMLAttributes; "tds-side-menu-collapse-button": LocalJSX.IntrinsicElements["tds-side-menu-collapse-button"] & JSXBase.HTMLAttributes; "tds-side-menu-dropdown": LocalJSX.IntrinsicElements["tds-side-menu-dropdown"] & JSXBase.HTMLAttributes; "tds-side-menu-dropdown-list": LocalJSX.IntrinsicElements["tds-side-menu-dropdown-list"] & JSXBase.HTMLAttributes; "tds-side-menu-dropdown-list-item": LocalJSX.IntrinsicElements["tds-side-menu-dropdown-list-item"] & JSXBase.HTMLAttributes; "tds-side-menu-item": LocalJSX.IntrinsicElements["tds-side-menu-item"] & JSXBase.HTMLAttributes; "tds-side-menu-overlay": LocalJSX.IntrinsicElements["tds-side-menu-overlay"] & JSXBase.HTMLAttributes; "tds-side-menu-user": LocalJSX.IntrinsicElements["tds-side-menu-user"] & JSXBase.HTMLAttributes; "tds-side-menu-user-image": LocalJSX.IntrinsicElements["tds-side-menu-user-image"] & JSXBase.HTMLAttributes; "tds-side-menu-user-label": LocalJSX.IntrinsicElements["tds-side-menu-user-label"] & JSXBase.HTMLAttributes; "tds-slider": LocalJSX.IntrinsicElements["tds-slider"] & JSXBase.HTMLAttributes; "tds-spinner": LocalJSX.IntrinsicElements["tds-spinner"] & JSXBase.HTMLAttributes; "tds-step": LocalJSX.IntrinsicElements["tds-step"] & JSXBase.HTMLAttributes; "tds-stepper": LocalJSX.IntrinsicElements["tds-stepper"] & JSXBase.HTMLAttributes; "tds-table": LocalJSX.IntrinsicElements["tds-table"] & JSXBase.HTMLAttributes; "tds-table-body": LocalJSX.IntrinsicElements["tds-table-body"] & JSXBase.HTMLAttributes; "tds-table-body-input-wrapper": LocalJSX.IntrinsicElements["tds-table-body-input-wrapper"] & JSXBase.HTMLAttributes; "tds-table-body-row": LocalJSX.IntrinsicElements["tds-table-body-row"] & JSXBase.HTMLAttributes; "tds-table-body-row-expandable": LocalJSX.IntrinsicElements["tds-table-body-row-expandable"] & JSXBase.HTMLAttributes; "tds-table-footer": LocalJSX.IntrinsicElements["tds-table-footer"] & JSXBase.HTMLAttributes; "tds-table-header": LocalJSX.IntrinsicElements["tds-table-header"] & JSXBase.HTMLAttributes; "tds-table-header-input-wrapper": LocalJSX.IntrinsicElements["tds-table-header-input-wrapper"] & JSXBase.HTMLAttributes; "tds-table-toolbar": LocalJSX.IntrinsicElements["tds-table-toolbar"] & JSXBase.HTMLAttributes; "tds-tag": LocalJSX.IntrinsicElements["tds-tag"] & JSXBase.HTMLAttributes; "tds-text-field": LocalJSX.IntrinsicElements["tds-text-field"] & JSXBase.HTMLAttributes; "tds-textarea": LocalJSX.IntrinsicElements["tds-textarea"] & JSXBase.HTMLAttributes; "tds-toast": LocalJSX.IntrinsicElements["tds-toast"] & JSXBase.HTMLAttributes; "tds-toggle": LocalJSX.IntrinsicElements["tds-toggle"] & JSXBase.HTMLAttributes; "tds-tooltip": LocalJSX.IntrinsicElements["tds-tooltip"] & JSXBase.HTMLAttributes; } } }