/* 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 { BoxBackground, BoxBorder, BoxBorderColor, BoxMaxSize, BoxMinSize, BoxPadding, BoxSize } from "./components/box/box";
import { BoxBackground as BoxBackground1, BoxBorder as BoxBorder1, BoxBorderColor as BoxBorderColor1, BoxPadding as BoxPadding1 } from "./components/box/box";
import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox";
import { CheckboxGroupChangeEventDetail } from "./components/checkbox-group/checkbox-group";
import { SparklineType } from "./components/sparkline/sparkline";
export { BoxBackground, BoxBorder, BoxBorderColor, BoxMaxSize, BoxMinSize, BoxPadding, BoxSize } from "./components/box/box";
export { BoxBackground as BoxBackground1, BoxBorder as BoxBorder1, BoxBorderColor as BoxBorderColor1, BoxPadding as BoxPadding1 } from "./components/box/box";
export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox";
export { CheckboxGroupChangeEventDetail } from "./components/checkbox-group/checkbox-group";
export { SparklineType } from "./components/sparkline/sparkline";
export namespace Components {
    interface DdsAccordion {
    }
    interface DdsAccordionGroup {
    }
    interface DdsAttachment {
    }
    /**
     * A person's avatar: their image, falling back to their initials, falling back to a generic placeholder. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name; `name` never becomes the accessible name.
     */
    interface DdsAvatar {
        /**
          * The URL of the image to show instead if `src` fails to load.
         */
        "fallbackSrc"?: string;
        /**
          * The person's name, which the initials and the visible label are drawn from.
         */
        "name"?: string;
        /**
          * Whether the avatar is a circle or a rounded square.
          * @default "circle"
         */
        "shape": "circle" | "square";
        /**
          * Whether to show `name` as a visible label beside the avatar.
          * @default false
         */
        "showName": boolean;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size": "xs" | "s" | "m" | "l" | "xl" | "2xl";
        /**
          * The URL of the image to show.
         */
        "src"?: string;
    }
    interface DdsAvatarGroup {
        /**
          * @default "info"
         */
        "tone": "info" | "success" | "warning" | "error";
    }
    interface DdsBanner {
        /**
          * @default "info"
         */
        "tone": "info" | "success" | "warning" | "error";
    }
    /**
     * A surface primitive: a block container with token-scaled padding, background, border and radius, and no layout opinion of its own. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsBox {
        /**
          * The surface colour, as a step on the surface scale.
          * @default "none"
         */
        "background": BoxBackground;
        /**
          * The size on the block axis. Takes a length, `auto`, or an intrinsic keyword.
         */
        "blockSize"?: BoxSize;
        /**
          * The border width. The border is always solid.
          * @default "none"
         */
        "border": BoxBorder;
        /**
          * The border colour, as a step on the border scale. Has no effect unless `border` is set.
         */
        "borderColor"?: BoxBorderColor;
        /**
          * Whether the surface is shown. `auto` leaves the host's own display alone; `none` hides it.
          * @default "auto"
         */
        "display": "auto" | "none";
        /**
          * The size on the inline axis. Takes a length, `auto`, or an intrinsic keyword.
         */
        "inlineSize"?: BoxSize;
        /**
          * The maximum size on the block axis. Takes a length, `none`, or an intrinsic keyword.
         */
        "maxBlockSize"?: BoxMaxSize;
        /**
          * The maximum size on the inline axis. Takes a length, `none`, or an intrinsic keyword.
         */
        "maxInlineSize"?: BoxMaxSize;
        /**
          * The minimum size on the block axis. Takes a length or an intrinsic keyword.
         */
        "minBlockSize"?: BoxMinSize;
        /**
          * The minimum size on the inline axis. Takes a length or an intrinsic keyword.
         */
        "minInlineSize"?: BoxMinSize;
        /**
          * How content that overflows the surface is handled.
         */
        "overflow"?: | "visible"
    | "hidden"
    | "clip"
    | "auto"
    | "scroll";
        /**
          * The space between the surface edge and its content on both axes. `paddingBlock` and `paddingInline` override it per axis.
          * @default "none"
         */
        "padding": BoxPadding;
        /**
          * The space on the block axis. Overrides the block value of `padding`.
         */
        "paddingBlock"?: BoxPadding;
        /**
          * The space on the inline axis. Overrides the inline value of `padding`.
         */
        "paddingInline"?: BoxPadding;
        /**
          * The corner radius.
          * @default "none"
         */
        "radius": | "none"
    | "inner"
    | "element"
    | "container"
    | "page"
    | "full";
    }
    /**
     * One step in a breadcrumb trail: a link to a page above the current one, or the current page itself as plain text. Place it directly inside a `dds-breadcrumb-group`, which names the trail and marks the last item as current.
     */
    interface DdsBreadcrumb {
        /**
          * Renders the item inert: it is not focusable and does not navigate.
          * @default false
         */
        "disabled": boolean;
        /**
          * Opens the link in a new tab and appends an external link icon.
          * @default false
         */
        "external": boolean;
        /**
          * The URL to link to. Ignored while `disabled`, and while the item is the current page.
         */
        "href"?: string;
    }
    /**
     * Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own.
     */
    interface DdsBreadcrumbGroup {
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface DdsButton {
        /**
          * Prevents interaction and dims the button.
          * @default false
         */
        "disabled": boolean;
        /**
          * Shows a chevron after the label, pointing the way the button opens.
         */
        "disclosure"?: "up" | "down" | "left" | "right" | "up-down";
        /**
          * Stretches the button to the full width of its container.
          * @default false
         */
        "expand": boolean;
        /**
          * The destination of the link variant.
         */
        "href"?: string;
        /**
          * The name of an icon shown before the label.
         */
        "icon"?: string;
        /**
          * Shows a spinner and blocks interaction while work is in progress.
          * @default false
         */
        "loading": boolean;
        /**
          * The name submitted with the form value.
         */
        "name"?: string;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size": "s" | "m" | "l";
        /**
          * Where the link variant opens its destination.
         */
        "target"?: string;
        /**
          * The intent the button conveys.
          * @default "default"
         */
        "tone": "default" | "critical";
        /**
          * The native button type. Ignored by the link variant.
          * @default "button"
         */
        "type": "button" | "submit" | "reset";
        /**
          * The visual emphasis of the button. The link variant renders an anchor.
          * @default "secondary"
         */
        "variant": | "primary"
    | "secondary"
    | "tertiary"
    // | "outline"
    // | "dashed"
    | "plain"
    | "link";
    }
    interface DdsButtonGroup {
        /**
          * @default "auto"
         */
        "gap": "auto" | "none";
    }
    /**
     * A slotted surface that groups related content, with optional header and footer regions. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Set `href` to make the whole card a link, and name it with `aria-label`.
     */
    interface DdsCard {
        /**
          * The card's surface colour, as a step on the surface scale.
          * @default "1"
         */
        "background": BoxBackground1;
        /**
          * The border width. The border is always solid.
          * @default "s"
         */
        "border": BoxBorder1;
        /**
          * The border colour, as a step on the border scale. Has no effect unless `border` is set.
         */
        "borderColor"?: BoxBorderColor1;
        /**
          * Opens the link in a new tab. Has no effect without `href`.
          * @default false
         */
        "external": boolean;
        /**
          * The URL the whole card links to. The link takes its accessible name from `aria-label` on the card, since `aria-labelledby` cannot cross the shadow root.
         */
        "href"?: string;
        /**
          * The space between the card's edge and its content.
          * @default "m"
         */
        "padding": BoxPadding1;
    }
    /**
     * A single checkbox control for a binary choice, or a partial one when indeterminate. It is form-associated, so it submits its own `name` and `value` and responds to `form.reset()`.
     */
    interface DdsCheckbox {
        /**
          * Whether the checkbox is checked. The attribute is the default; the property follows user input.
          * @default false
         */
        "checked": boolean;
        /**
          * Strikes through the label while the checkbox is checked or indeterminate.
          * @default false
         */
        "decoration": boolean;
        /**
          * Prevents interaction and removes the checkbox from the tab order.
          * @default false
         */
        "disabled": boolean;
        /**
          * An error message shown below the label. While set, the checkbox is invalid, styled as an error and announced as invalid.
         */
        "error"?: string;
        /**
          * Supporting text shown below the label and announced as the checkbox's description.
         */
        "hint"?: string;
        /**
          * Shows the partial-selection state. Cleared when the user toggles the checkbox.
          * @default false
         */
        "indeterminate": boolean;
        /**
          * The name submitted with the form.
         */
        "name"?: string;
        /**
          * Prevents the user from changing the checked state while keeping the checkbox focusable.
          * @default false
         */
        "readonly": boolean;
        /**
          * Makes the checkbox invalid until it is checked.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the control's corners are square or fully rounded.
          * @default "square"
         */
        "shape": "square" | "circle";
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size": "s" | "m";
        /**
          * The value submitted with the form when checked. Submits `on` when omitted.
         */
        "value"?: string;
    }
    /**
     * Groups related `dds-checkbox` members under a shared label, hint and error. Each checkbox stays its own form control and tab stop; the group names them as a set, can disable or lock them together, and owns an explicit error. Selection is read from the members, and the group reports the whole selection through `ddsChange`.
     */
    interface DdsCheckboxGroup {
        /**
          * Disables every member and removes them from the tab order.
          * @default false
         */
        "disabled": boolean;
        /**
          * An error message shown below the label. While set, the group is invalid and announced as invalid.
         */
        "error"?: string;
        /**
          * Supporting text shown below the label and announced as the group's description.
         */
        "hint"?: string;
        /**
          * Whether the members stack vertically or flow in a wrapping row.
          * @default "vertical"
         */
        "orientation": "vertical" | "horizontal";
        /**
          * Prevents the user from changing any member while keeping them focusable.
          * @default false
         */
        "readonly": boolean;
        /**
          * Sets the shape of every member. Members keep their own shape when omitted.
         */
        "shape"?: "square" | "circle";
        /**
          * Sets the size of every member. Members keep their own size when omitted.
         */
        "size"?: "s" | "m";
    }
    /**
     * A chip is a small inline token that labels a piece of information, such as an attribute or a filter value.
     */
    interface DdsChip {
        /**
          * Shows a dot before the content, coloured by the status.
          * @default false
         */
        "dot": boolean;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size": "s" | "m" | "l";
        /**
          * The meaning the chip's colour conveys.
          * @default "neutral"
         */
        "status": | "neutral"
    | "info"
    | "positive"
    | "warning"
    | "error"
    | "ai";
        /**
          * The visual treatment of the chip. The ghost variant removes the surface fill.
          * @default "default"
         */
        "variant": "default" | "ghost";
    }
    interface DdsCode {
    }
    interface DdsColorScheme {
        /**
          * @default "light"
         */
        "theme": "light" | "dark";
    }
    interface DdsCountry {
        /**
          * @default "us"
         */
        "code": string;
        /**
          * @default "en"
         */
        "language": string;
    }
    interface DdsDateTime {
    }
    interface DdsDialog {
    }
    /**
     * A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it.
     */
    interface DdsDivider {
        /**
          * Whether to add standard spacing around the line.
          * @default "none"
         */
        "margin": "none" | "normal";
        /**
          * Whether the line runs across the inline axis or down the block axis.
          * @default "horizontal"
         */
        "orientation": "horizontal" | "vertical";
    }
    interface DdsFieldset {
        "hint": string;
        "legend"?: string;
    }
    interface DdsFlag {
        /**
          * @default "us"
         */
        "code": string;
        /**
          * @default "m"
         */
        "size": "s" | "m" | "l";
    }
    interface DdsGlobalFrame {
    }
    interface DdsGlobalHeader {
        "logoAlt": string | undefined;
        "logoSrc": string | undefined;
    }
    interface DdsGlobalNavigation {
    }
    /**
     * A layout container that arranges its children in rows and columns, with a uniform gap and configurable alignment. Place `dds-grid-item` in it to span several columns or rows. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsGrid {
        /**
          * How the rows are distributed on the block axis when the grid is larger than its tracks.
          * @default "normal"
         */
        "alignContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How items align within their cell on the block axis.
          * @default "normal"
         */
        "alignItems": "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        /**
          * The space between columns, on the inline axis. Overrides the column value of `gap`.
         */
        "columnGap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * The space between rows and columns on both axes. `rowGap` and `columnGap` override it per axis.
          * @default "none"
         */
        "gap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * The column tracks, as a CSS track list such as `repeat(3, 1fr)` or `1fr auto`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser.
         */
        "gridTemplateColumns"?: string;
        /**
          * The row tracks, as a CSS track list such as `auto 1fr`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser.
         */
        "gridTemplateRows"?: string;
        /**
          * How the columns are distributed on the inline axis when the grid is larger than its tracks.
          * @default "normal"
         */
        "justifyContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How items align within their cell on the inline axis.
          * @default "normal"
         */
        "justifyItems": "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        /**
          * The space between rows, on the block axis. Overrides the row value of `gap`.
         */
        "rowGap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
    }
    /**
     * A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect.
     */
    interface DdsGridItem {
        /**
          * The number of columns the item spans. An integer of 1 or more.
          * @default 1
         */
        "colspan": number;
        /**
          * The number of rows the item spans. An integer of 1 or more.
          * @default 1
         */
        "rowspan": number;
    }
    /**
     * A page or section heading. `as` chooses the heading level, which is what gives the heading its place in the document outline; `size`, `weight` and `contrast` only style it, so a heading's level and its size are chosen separately.
     * Use for the titles of a page and its sections. Use `dds-text` for body text, captions and inline text.
     */
    interface DdsHeading {
        /**
          * The heading level, which sets the heading's place in the document outline and its default size.
          * @default "h2"
         */
        "as": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        /**
          * How strongly the heading stands out against its background.
          * @default "high"
         */
        "contrast": "high" | "low";
        /**
          * Which step of the type scale to render at. When not set, the size follows `as`.
         */
        "size"?: | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "8xl"
    | "9xl"
    | "10xl";
        /**
          * Overrides the `text-align` the heading would inherit.
         */
        "textAlign"?: "start" | "center" | "end" | "justify";
        /**
          * Overrides the `text-wrap` the heading would inherit.
         */
        "textWrap"?: "wrap" | "nowrap" | "balance" | "pretty";
        /**
          * How heavy the heading is.
          * @default "bold"
         */
        "weight": "normal" | "medium" | "semibold" | "bold";
    }
    interface DdsHighlight {
    }
    /**
     * A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name.
     */
    interface DdsIcon {
        /**
          * Which colour role the glyph takes, or `inherit` to follow the surrounding text colour.
          * @default "inherit"
         */
        "color": | "inherit"
    | "primary"
    | "secondary"
    | "tertiary"
    | "disabled"
    | "success"
    | "error"
    | "warning";
        /**
          * The key of the glyph to draw from the icon set.
         */
        "name": string;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size": "2xs" | "xs" | "s" | "m" | "l";
    }
    interface DdsKeyboard {
    }
    interface DdsLabel {
    }
    /**
     * A navigational element that takes users to another page or resource, most often placed within or directly following a sentence.
     */
    interface DdsLink {
        /**
          * Renders the link inert: it is not focusable and does not navigate.
          * @default false
         */
        "disabled": boolean;
        /**
          * Opens the link in a new tab and appends an external link icon.
          * @default false
         */
        "external": boolean;
        /**
          * The URL to link to. Ignored while `disabled`.
         */
        "href"?: string;
        /**
          * Name of the icon to display after the link label.
         */
        "iconEnd"?: string;
        /**
          * Name of the icon to display before the link label.
         */
        "iconStart"?: string;
        /**
          * Controls the visual size of the link.
          * @default "m"
         */
        "size": "s" | "m";
        /**
          * Controls the visual style of the link.
          * @default "default"
         */
        "variant": "default" | "subtle" | "ai";
    }
    interface DdsMeter {
    }
    interface DdsNavigation {
    }
    interface DdsNumber {
    }
    interface DdsPagination {
    }
    /**
     * A popover is a floating panel anchored to a trigger that reveals contextual information or secondary actions on demand. It opens in the browser's top layer and closes on `Esc` or a click outside.
     */
    interface DdsPopover {
        /**
          * Whether the panel is open. The attribute follows the user opening and closing the panel, and setting it opens or closes the panel.
          * @default false
         */
        "open": boolean;
        /**
          * The preferred side and alignment of the panel relative to the trigger. The panel flips to stay in view.
          * @default "bottom"
         */
        "placement": | "top"
    | "top-start"
    | "top-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end";
    }
    interface DdsProgressCircle {
    }
    interface DdsRadio {
    }
    interface DdsRadioGroup {
    }
    interface DdsRoot {
    }
    interface DdsSegmentedControl {
    }
    interface DdsSegmentedControlGroup {
    }
    interface DdsSparkline {
        "color"?: string;
        /**
          * @default "line"
         */
        "type": SparklineType;
    }
    interface DdsSpinner {
        /**
          * @default 'normal'
         */
        "duration": 'slow' | 'normal' | 'fast';
        /**
          * @default "m"
         */
        "size": "2xs" | "xs" | "s" | "m" | "l";
    }
    /**
     * A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsStack {
        /**
          * How wrapped lines are distributed on the axis perpendicular to `direction`. Has no effect unless `wrap` is set.
          * @default "normal"
         */
        "alignContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How children align on the axis perpendicular to `direction`.
          * @default "normal"
         */
        "alignItems": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "normal";
        /**
          * The space between columns, on the inline axis. Overrides the column value of `gap`.
         */
        "columnGap"?: | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        /**
          * The axis children are placed along: `block` stacks them vertically, `inline` places them in a row.
          * @default "block"
         */
        "direction": "block" | "inline";
        /**
          * The space between children on both axes. `rowGap` and `columnGap` override it per axis.
          * @default "none"
         */
        "gap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * How children are distributed along `direction`.
          * @default "normal"
         */
        "justifyContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * The space between rows, on the block axis. Overrides the row value of `gap`.
         */
        "rowGap"?: | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        /**
          * Whether children flow onto the next line when they do not fit.
          * @default false
         */
        "wrap": boolean;
    }
    interface DdsSwitch {
        "label"?: string;
        /**
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
    }
    interface DdsTab {
        /**
          * @default "light"
         */
        "theme": "light" | "dark";
    }
    interface DdsTabGroup {
    }
    /**
     * Body text for the interface, set in the design system's type scale: paragraphs, captions, supporting copy and inline emphasis.
     * `as` chooses the element, which gives the text its meaning and decides whether it sits on its own line or inside one. `size`, `weight` and `contrast` only change how it looks.
     * Use it for any text that needs design system styling, and a plain HTML element where it doesn't. For headings use `dds-heading`.
     */
    interface DdsText {
        /**
          * The element the text renders as, which sets its meaning and whether it is a block or inline.
          * @default "span"
         */
        "as": | "p"
    | "span"
    | "div"
    | "strong"
    | "em"
    | "small";
        /**
          * How strongly the text stands out against its background.
          * @default "high"
         */
        "contrast": "high" | "low";
        /**
          * The `font-variant-numeric` property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. - `auto`: The default value. The browser determines whether to use alternate glyphs based on the font and context. - `tabular-nums`: Uses fixed-width digits, which are ideal for aligning numbers in tables or lists. - `diagonal-fractions`: Uses diagonal fraction glyphs, which are ideal for displaying fractions in a more compact and visually appealing way. For more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).
          * @default "auto"
         */
        "fontVariantNumeric": | "auto"
    | "tabular-nums"
    | "diagonal-fractions";
        /**
          * Which step of the type scale to render at. Each step carries its own line height.
          * @default "m"
         */
        "size": "xs" | "s" | "m" | "l";
        /**
          * Overrides the `text-align` the text would inherit.
         */
        "textAlign"?: "start" | "center" | "end" | "justify";
        /**
          * Overrides the `text-wrap` the text would inherit.
         */
        "textWrap"?: "wrap" | "nowrap" | "balance" | "pretty";
        /**
          * How heavy the text is.
          * @default "normal"
         */
        "weight": "normal" | "medium" | "semibold" | "bold";
    }
    interface DdsTextField {
    }
    /**
     * A tooltip is a short floating label that explains the element it is anchored to. It opens while a pointer is over the trigger or focus is inside it, and closes on `Esc`. It is a visual aid only: link the content to the trigger with `aria-describedby` so assistive technology announces it, and give a trigger that is not natively focusable `tabindex="0"`.
     */
    interface DdsTooltip {
        /**
          * The side of the trigger the tooltip prefers. It flips to stay in view.
          * @default "top"
         */
        "placement": "top" | "start" | "end" | "bottom";
        /**
          * The maximum width of the tooltip.
          * @default "m"
         */
        "size": "s" | "m" | "l";
    }
}
export interface DdsBreadcrumbCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLDdsBreadcrumbElement;
}
export interface DdsButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLDdsButtonElement;
}
export interface DdsCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLDdsCheckboxElement;
}
export interface DdsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLDdsCheckboxGroupElement;
}
export interface DdsPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLDdsPopoverElement;
}
declare global {
    interface HTMLDdsAccordionElement extends Components.DdsAccordion, HTMLStencilElement {
    }
    var HTMLDdsAccordionElement: {
        prototype: HTMLDdsAccordionElement;
        new (): HTMLDdsAccordionElement;
    };
    interface HTMLDdsAccordionGroupElement extends Components.DdsAccordionGroup, HTMLStencilElement {
    }
    var HTMLDdsAccordionGroupElement: {
        prototype: HTMLDdsAccordionGroupElement;
        new (): HTMLDdsAccordionGroupElement;
    };
    interface HTMLDdsAttachmentElement extends Components.DdsAttachment, HTMLStencilElement {
    }
    var HTMLDdsAttachmentElement: {
        prototype: HTMLDdsAttachmentElement;
        new (): HTMLDdsAttachmentElement;
    };
    /**
     * A person's avatar: their image, falling back to their initials, falling back to a generic placeholder. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name; `name` never becomes the accessible name.
     */
    interface HTMLDdsAvatarElement extends Components.DdsAvatar, HTMLStencilElement {
    }
    var HTMLDdsAvatarElement: {
        prototype: HTMLDdsAvatarElement;
        new (): HTMLDdsAvatarElement;
    };
    interface HTMLDdsAvatarGroupElement extends Components.DdsAvatarGroup, HTMLStencilElement {
    }
    var HTMLDdsAvatarGroupElement: {
        prototype: HTMLDdsAvatarGroupElement;
        new (): HTMLDdsAvatarGroupElement;
    };
    interface HTMLDdsBannerElement extends Components.DdsBanner, HTMLStencilElement {
    }
    var HTMLDdsBannerElement: {
        prototype: HTMLDdsBannerElement;
        new (): HTMLDdsBannerElement;
    };
    /**
     * A surface primitive: a block container with token-scaled padding, background, border and radius, and no layout opinion of its own. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface HTMLDdsBoxElement extends Components.DdsBox, HTMLStencilElement {
    }
    var HTMLDdsBoxElement: {
        prototype: HTMLDdsBoxElement;
        new (): HTMLDdsBoxElement;
    };
    interface HTMLDdsBreadcrumbElementEventMap {
        "ddsFocus": void;
        "ddsBlur": void;
    }
    /**
     * One step in a breadcrumb trail: a link to a page above the current one, or the current page itself as plain text. Place it directly inside a `dds-breadcrumb-group`, which names the trail and marks the last item as current.
     */
    interface HTMLDdsBreadcrumbElement extends Components.DdsBreadcrumb, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDdsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLDdsBreadcrumbElement, ev: DdsBreadcrumbCustomEvent<HTMLDdsBreadcrumbElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDdsBreadcrumbElementEventMap>(type: K, listener: (this: HTMLDdsBreadcrumbElement, ev: DdsBreadcrumbCustomEvent<HTMLDdsBreadcrumbElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDdsBreadcrumbElement: {
        prototype: HTMLDdsBreadcrumbElement;
        new (): HTMLDdsBreadcrumbElement;
    };
    /**
     * Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own.
     */
    interface HTMLDdsBreadcrumbGroupElement extends Components.DdsBreadcrumbGroup, HTMLStencilElement {
    }
    var HTMLDdsBreadcrumbGroupElement: {
        prototype: HTMLDdsBreadcrumbGroupElement;
        new (): HTMLDdsBreadcrumbGroupElement;
    };
    interface HTMLDdsButtonElementEventMap {
        "ddsFocus": void;
        "ddsBlur": void;
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface HTMLDdsButtonElement extends Components.DdsButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDdsButtonElementEventMap>(type: K, listener: (this: HTMLDdsButtonElement, ev: DdsButtonCustomEvent<HTMLDdsButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDdsButtonElementEventMap>(type: K, listener: (this: HTMLDdsButtonElement, ev: DdsButtonCustomEvent<HTMLDdsButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDdsButtonElement: {
        prototype: HTMLDdsButtonElement;
        new (): HTMLDdsButtonElement;
    };
    interface HTMLDdsButtonGroupElement extends Components.DdsButtonGroup, HTMLStencilElement {
    }
    var HTMLDdsButtonGroupElement: {
        prototype: HTMLDdsButtonGroupElement;
        new (): HTMLDdsButtonGroupElement;
    };
    /**
     * A slotted surface that groups related content, with optional header and footer regions. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Set `href` to make the whole card a link, and name it with `aria-label`.
     */
    interface HTMLDdsCardElement extends Components.DdsCard, HTMLStencilElement {
    }
    var HTMLDdsCardElement: {
        prototype: HTMLDdsCardElement;
        new (): HTMLDdsCardElement;
    };
    interface HTMLDdsCheckboxElementEventMap {
        "ddsChange": CheckboxChangeEventDetail;
        "ddsFocus": void;
        "ddsBlur": void;
    }
    /**
     * A single checkbox control for a binary choice, or a partial one when indeterminate. It is form-associated, so it submits its own `name` and `value` and responds to `form.reset()`.
     */
    interface HTMLDdsCheckboxElement extends Components.DdsCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDdsCheckboxElementEventMap>(type: K, listener: (this: HTMLDdsCheckboxElement, ev: DdsCheckboxCustomEvent<HTMLDdsCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDdsCheckboxElementEventMap>(type: K, listener: (this: HTMLDdsCheckboxElement, ev: DdsCheckboxCustomEvent<HTMLDdsCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDdsCheckboxElement: {
        prototype: HTMLDdsCheckboxElement;
        new (): HTMLDdsCheckboxElement;
    };
    interface HTMLDdsCheckboxGroupElementEventMap {
        "ddsChange": CheckboxGroupChangeEventDetail;
    }
    /**
     * Groups related `dds-checkbox` members under a shared label, hint and error. Each checkbox stays its own form control and tab stop; the group names them as a set, can disable or lock them together, and owns an explicit error. Selection is read from the members, and the group reports the whole selection through `ddsChange`.
     */
    interface HTMLDdsCheckboxGroupElement extends Components.DdsCheckboxGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDdsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDdsCheckboxGroupElement, ev: DdsCheckboxGroupCustomEvent<HTMLDdsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDdsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDdsCheckboxGroupElement, ev: DdsCheckboxGroupCustomEvent<HTMLDdsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDdsCheckboxGroupElement: {
        prototype: HTMLDdsCheckboxGroupElement;
        new (): HTMLDdsCheckboxGroupElement;
    };
    /**
     * A chip is a small inline token that labels a piece of information, such as an attribute or a filter value.
     */
    interface HTMLDdsChipElement extends Components.DdsChip, HTMLStencilElement {
    }
    var HTMLDdsChipElement: {
        prototype: HTMLDdsChipElement;
        new (): HTMLDdsChipElement;
    };
    interface HTMLDdsCodeElement extends Components.DdsCode, HTMLStencilElement {
    }
    var HTMLDdsCodeElement: {
        prototype: HTMLDdsCodeElement;
        new (): HTMLDdsCodeElement;
    };
    interface HTMLDdsColorSchemeElement extends Components.DdsColorScheme, HTMLStencilElement {
    }
    var HTMLDdsColorSchemeElement: {
        prototype: HTMLDdsColorSchemeElement;
        new (): HTMLDdsColorSchemeElement;
    };
    interface HTMLDdsCountryElement extends Components.DdsCountry, HTMLStencilElement {
    }
    var HTMLDdsCountryElement: {
        prototype: HTMLDdsCountryElement;
        new (): HTMLDdsCountryElement;
    };
    interface HTMLDdsDateTimeElement extends Components.DdsDateTime, HTMLStencilElement {
    }
    var HTMLDdsDateTimeElement: {
        prototype: HTMLDdsDateTimeElement;
        new (): HTMLDdsDateTimeElement;
    };
    interface HTMLDdsDialogElement extends Components.DdsDialog, HTMLStencilElement {
    }
    var HTMLDdsDialogElement: {
        prototype: HTMLDdsDialogElement;
        new (): HTMLDdsDialogElement;
    };
    /**
     * A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it.
     */
    interface HTMLDdsDividerElement extends Components.DdsDivider, HTMLStencilElement {
    }
    var HTMLDdsDividerElement: {
        prototype: HTMLDdsDividerElement;
        new (): HTMLDdsDividerElement;
    };
    interface HTMLDdsFieldsetElement extends Components.DdsFieldset, HTMLStencilElement {
    }
    var HTMLDdsFieldsetElement: {
        prototype: HTMLDdsFieldsetElement;
        new (): HTMLDdsFieldsetElement;
    };
    interface HTMLDdsFlagElement extends Components.DdsFlag, HTMLStencilElement {
    }
    var HTMLDdsFlagElement: {
        prototype: HTMLDdsFlagElement;
        new (): HTMLDdsFlagElement;
    };
    interface HTMLDdsGlobalFrameElement extends Components.DdsGlobalFrame, HTMLStencilElement {
    }
    var HTMLDdsGlobalFrameElement: {
        prototype: HTMLDdsGlobalFrameElement;
        new (): HTMLDdsGlobalFrameElement;
    };
    interface HTMLDdsGlobalHeaderElement extends Components.DdsGlobalHeader, HTMLStencilElement {
    }
    var HTMLDdsGlobalHeaderElement: {
        prototype: HTMLDdsGlobalHeaderElement;
        new (): HTMLDdsGlobalHeaderElement;
    };
    interface HTMLDdsGlobalNavigationElement extends Components.DdsGlobalNavigation, HTMLStencilElement {
    }
    var HTMLDdsGlobalNavigationElement: {
        prototype: HTMLDdsGlobalNavigationElement;
        new (): HTMLDdsGlobalNavigationElement;
    };
    /**
     * A layout container that arranges its children in rows and columns, with a uniform gap and configurable alignment. Place `dds-grid-item` in it to span several columns or rows. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface HTMLDdsGridElement extends Components.DdsGrid, HTMLStencilElement {
    }
    var HTMLDdsGridElement: {
        prototype: HTMLDdsGridElement;
        new (): HTMLDdsGridElement;
    };
    /**
     * A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect.
     */
    interface HTMLDdsGridItemElement extends Components.DdsGridItem, HTMLStencilElement {
    }
    var HTMLDdsGridItemElement: {
        prototype: HTMLDdsGridItemElement;
        new (): HTMLDdsGridItemElement;
    };
    /**
     * A page or section heading. `as` chooses the heading level, which is what gives the heading its place in the document outline; `size`, `weight` and `contrast` only style it, so a heading's level and its size are chosen separately.
     * Use for the titles of a page and its sections. Use `dds-text` for body text, captions and inline text.
     */
    interface HTMLDdsHeadingElement extends Components.DdsHeading, HTMLStencilElement {
    }
    var HTMLDdsHeadingElement: {
        prototype: HTMLDdsHeadingElement;
        new (): HTMLDdsHeadingElement;
    };
    interface HTMLDdsHighlightElement extends Components.DdsHighlight, HTMLStencilElement {
    }
    var HTMLDdsHighlightElement: {
        prototype: HTMLDdsHighlightElement;
        new (): HTMLDdsHighlightElement;
    };
    /**
     * A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name.
     */
    interface HTMLDdsIconElement extends Components.DdsIcon, HTMLStencilElement {
    }
    var HTMLDdsIconElement: {
        prototype: HTMLDdsIconElement;
        new (): HTMLDdsIconElement;
    };
    interface HTMLDdsKeyboardElement extends Components.DdsKeyboard, HTMLStencilElement {
    }
    var HTMLDdsKeyboardElement: {
        prototype: HTMLDdsKeyboardElement;
        new (): HTMLDdsKeyboardElement;
    };
    interface HTMLDdsLabelElement extends Components.DdsLabel, HTMLStencilElement {
    }
    var HTMLDdsLabelElement: {
        prototype: HTMLDdsLabelElement;
        new (): HTMLDdsLabelElement;
    };
    /**
     * A navigational element that takes users to another page or resource, most often placed within or directly following a sentence.
     */
    interface HTMLDdsLinkElement extends Components.DdsLink, HTMLStencilElement {
    }
    var HTMLDdsLinkElement: {
        prototype: HTMLDdsLinkElement;
        new (): HTMLDdsLinkElement;
    };
    interface HTMLDdsMeterElement extends Components.DdsMeter, HTMLStencilElement {
    }
    var HTMLDdsMeterElement: {
        prototype: HTMLDdsMeterElement;
        new (): HTMLDdsMeterElement;
    };
    interface HTMLDdsNavigationElement extends Components.DdsNavigation, HTMLStencilElement {
    }
    var HTMLDdsNavigationElement: {
        prototype: HTMLDdsNavigationElement;
        new (): HTMLDdsNavigationElement;
    };
    interface HTMLDdsNumberElement extends Components.DdsNumber, HTMLStencilElement {
    }
    var HTMLDdsNumberElement: {
        prototype: HTMLDdsNumberElement;
        new (): HTMLDdsNumberElement;
    };
    interface HTMLDdsPaginationElement extends Components.DdsPagination, HTMLStencilElement {
    }
    var HTMLDdsPaginationElement: {
        prototype: HTMLDdsPaginationElement;
        new (): HTMLDdsPaginationElement;
    };
    interface HTMLDdsPopoverElementEventMap {
        "ddsPopoverWillOpen": void;
        "ddsPopoverDidOpen": void;
        "ddsPopoverDidClose": void;
    }
    /**
     * A popover is a floating panel anchored to a trigger that reveals contextual information or secondary actions on demand. It opens in the browser's top layer and closes on `Esc` or a click outside.
     */
    interface HTMLDdsPopoverElement extends Components.DdsPopover, HTMLStencilElement {
        addEventListener<K extends keyof HTMLDdsPopoverElementEventMap>(type: K, listener: (this: HTMLDdsPopoverElement, ev: DdsPopoverCustomEvent<HTMLDdsPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLDdsPopoverElementEventMap>(type: K, listener: (this: HTMLDdsPopoverElement, ev: DdsPopoverCustomEvent<HTMLDdsPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLDdsPopoverElement: {
        prototype: HTMLDdsPopoverElement;
        new (): HTMLDdsPopoverElement;
    };
    interface HTMLDdsProgressCircleElement extends Components.DdsProgressCircle, HTMLStencilElement {
    }
    var HTMLDdsProgressCircleElement: {
        prototype: HTMLDdsProgressCircleElement;
        new (): HTMLDdsProgressCircleElement;
    };
    interface HTMLDdsRadioElement extends Components.DdsRadio, HTMLStencilElement {
    }
    var HTMLDdsRadioElement: {
        prototype: HTMLDdsRadioElement;
        new (): HTMLDdsRadioElement;
    };
    interface HTMLDdsRadioGroupElement extends Components.DdsRadioGroup, HTMLStencilElement {
    }
    var HTMLDdsRadioGroupElement: {
        prototype: HTMLDdsRadioGroupElement;
        new (): HTMLDdsRadioGroupElement;
    };
    interface HTMLDdsRootElement extends Components.DdsRoot, HTMLStencilElement {
    }
    var HTMLDdsRootElement: {
        prototype: HTMLDdsRootElement;
        new (): HTMLDdsRootElement;
    };
    interface HTMLDdsSegmentedControlElement extends Components.DdsSegmentedControl, HTMLStencilElement {
    }
    var HTMLDdsSegmentedControlElement: {
        prototype: HTMLDdsSegmentedControlElement;
        new (): HTMLDdsSegmentedControlElement;
    };
    interface HTMLDdsSegmentedControlGroupElement extends Components.DdsSegmentedControlGroup, HTMLStencilElement {
    }
    var HTMLDdsSegmentedControlGroupElement: {
        prototype: HTMLDdsSegmentedControlGroupElement;
        new (): HTMLDdsSegmentedControlGroupElement;
    };
    interface HTMLDdsSparklineElement extends Components.DdsSparkline, HTMLStencilElement {
    }
    var HTMLDdsSparklineElement: {
        prototype: HTMLDdsSparklineElement;
        new (): HTMLDdsSparklineElement;
    };
    interface HTMLDdsSpinnerElement extends Components.DdsSpinner, HTMLStencilElement {
    }
    var HTMLDdsSpinnerElement: {
        prototype: HTMLDdsSpinnerElement;
        new (): HTMLDdsSpinnerElement;
    };
    /**
     * A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface HTMLDdsStackElement extends Components.DdsStack, HTMLStencilElement {
    }
    var HTMLDdsStackElement: {
        prototype: HTMLDdsStackElement;
        new (): HTMLDdsStackElement;
    };
    interface HTMLDdsSwitchElement extends Components.DdsSwitch, HTMLStencilElement {
    }
    var HTMLDdsSwitchElement: {
        prototype: HTMLDdsSwitchElement;
        new (): HTMLDdsSwitchElement;
    };
    interface HTMLDdsTabElement extends Components.DdsTab, HTMLStencilElement {
    }
    var HTMLDdsTabElement: {
        prototype: HTMLDdsTabElement;
        new (): HTMLDdsTabElement;
    };
    interface HTMLDdsTabGroupElement extends Components.DdsTabGroup, HTMLStencilElement {
    }
    var HTMLDdsTabGroupElement: {
        prototype: HTMLDdsTabGroupElement;
        new (): HTMLDdsTabGroupElement;
    };
    /**
     * Body text for the interface, set in the design system's type scale: paragraphs, captions, supporting copy and inline emphasis.
     * `as` chooses the element, which gives the text its meaning and decides whether it sits on its own line or inside one. `size`, `weight` and `contrast` only change how it looks.
     * Use it for any text that needs design system styling, and a plain HTML element where it doesn't. For headings use `dds-heading`.
     */
    interface HTMLDdsTextElement extends Components.DdsText, HTMLStencilElement {
    }
    var HTMLDdsTextElement: {
        prototype: HTMLDdsTextElement;
        new (): HTMLDdsTextElement;
    };
    interface HTMLDdsTextFieldElement extends Components.DdsTextField, HTMLStencilElement {
    }
    var HTMLDdsTextFieldElement: {
        prototype: HTMLDdsTextFieldElement;
        new (): HTMLDdsTextFieldElement;
    };
    /**
     * A tooltip is a short floating label that explains the element it is anchored to. It opens while a pointer is over the trigger or focus is inside it, and closes on `Esc`. It is a visual aid only: link the content to the trigger with `aria-describedby` so assistive technology announces it, and give a trigger that is not natively focusable `tabindex="0"`.
     */
    interface HTMLDdsTooltipElement extends Components.DdsTooltip, HTMLStencilElement {
    }
    var HTMLDdsTooltipElement: {
        prototype: HTMLDdsTooltipElement;
        new (): HTMLDdsTooltipElement;
    };
    interface HTMLElementTagNameMap {
        "dds-accordion": HTMLDdsAccordionElement;
        "dds-accordion-group": HTMLDdsAccordionGroupElement;
        "dds-attachment": HTMLDdsAttachmentElement;
        "dds-avatar": HTMLDdsAvatarElement;
        "dds-avatar-group": HTMLDdsAvatarGroupElement;
        "dds-banner": HTMLDdsBannerElement;
        "dds-box": HTMLDdsBoxElement;
        "dds-breadcrumb": HTMLDdsBreadcrumbElement;
        "dds-breadcrumb-group": HTMLDdsBreadcrumbGroupElement;
        "dds-button": HTMLDdsButtonElement;
        "dds-button-group": HTMLDdsButtonGroupElement;
        "dds-card": HTMLDdsCardElement;
        "dds-checkbox": HTMLDdsCheckboxElement;
        "dds-checkbox-group": HTMLDdsCheckboxGroupElement;
        "dds-chip": HTMLDdsChipElement;
        "dds-code": HTMLDdsCodeElement;
        "dds-color-scheme": HTMLDdsColorSchemeElement;
        "dds-country": HTMLDdsCountryElement;
        "dds-date-time": HTMLDdsDateTimeElement;
        "dds-dialog": HTMLDdsDialogElement;
        "dds-divider": HTMLDdsDividerElement;
        "dds-fieldset": HTMLDdsFieldsetElement;
        "dds-flag": HTMLDdsFlagElement;
        "dds-global-frame": HTMLDdsGlobalFrameElement;
        "dds-global-header": HTMLDdsGlobalHeaderElement;
        "dds-global-navigation": HTMLDdsGlobalNavigationElement;
        "dds-grid": HTMLDdsGridElement;
        "dds-grid-item": HTMLDdsGridItemElement;
        "dds-heading": HTMLDdsHeadingElement;
        "dds-highlight": HTMLDdsHighlightElement;
        "dds-icon": HTMLDdsIconElement;
        "dds-keyboard": HTMLDdsKeyboardElement;
        "dds-label": HTMLDdsLabelElement;
        "dds-link": HTMLDdsLinkElement;
        "dds-meter": HTMLDdsMeterElement;
        "dds-navigation": HTMLDdsNavigationElement;
        "dds-number": HTMLDdsNumberElement;
        "dds-pagination": HTMLDdsPaginationElement;
        "dds-popover": HTMLDdsPopoverElement;
        "dds-progress-circle": HTMLDdsProgressCircleElement;
        "dds-radio": HTMLDdsRadioElement;
        "dds-radio-group": HTMLDdsRadioGroupElement;
        "dds-root": HTMLDdsRootElement;
        "dds-segmented-control": HTMLDdsSegmentedControlElement;
        "dds-segmented-control-group": HTMLDdsSegmentedControlGroupElement;
        "dds-sparkline": HTMLDdsSparklineElement;
        "dds-spinner": HTMLDdsSpinnerElement;
        "dds-stack": HTMLDdsStackElement;
        "dds-switch": HTMLDdsSwitchElement;
        "dds-tab": HTMLDdsTabElement;
        "dds-tab-group": HTMLDdsTabGroupElement;
        "dds-text": HTMLDdsTextElement;
        "dds-text-field": HTMLDdsTextFieldElement;
        "dds-tooltip": HTMLDdsTooltipElement;
    }
}
declare namespace LocalJSX {
    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K]?: never };

    interface DdsAccordion {
    }
    interface DdsAccordionGroup {
    }
    interface DdsAttachment {
    }
    /**
     * A person's avatar: their image, falling back to their initials, falling back to a generic placeholder. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name; `name` never becomes the accessible name.
     */
    interface DdsAvatar {
        /**
          * The URL of the image to show instead if `src` fails to load.
         */
        "fallbackSrc"?: string;
        /**
          * The person's name, which the initials and the visible label are drawn from.
         */
        "name"?: string;
        /**
          * Whether the avatar is a circle or a rounded square.
          * @default "circle"
         */
        "shape"?: "circle" | "square";
        /**
          * Whether to show `name` as a visible label beside the avatar.
          * @default false
         */
        "showName"?: boolean;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size"?: "xs" | "s" | "m" | "l" | "xl" | "2xl";
        /**
          * The URL of the image to show.
         */
        "src"?: string;
    }
    interface DdsAvatarGroup {
        /**
          * @default "info"
         */
        "tone"?: "info" | "success" | "warning" | "error";
    }
    interface DdsBanner {
        /**
          * @default "info"
         */
        "tone"?: "info" | "success" | "warning" | "error";
    }
    /**
     * A surface primitive: a block container with token-scaled padding, background, border and radius, and no layout opinion of its own. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsBox {
        /**
          * The surface colour, as a step on the surface scale.
          * @default "none"
         */
        "background"?: BoxBackground;
        /**
          * The size on the block axis. Takes a length, `auto`, or an intrinsic keyword.
         */
        "blockSize"?: BoxSize;
        /**
          * The border width. The border is always solid.
          * @default "none"
         */
        "border"?: BoxBorder;
        /**
          * The border colour, as a step on the border scale. Has no effect unless `border` is set.
         */
        "borderColor"?: BoxBorderColor;
        /**
          * Whether the surface is shown. `auto` leaves the host's own display alone; `none` hides it.
          * @default "auto"
         */
        "display"?: "auto" | "none";
        /**
          * The size on the inline axis. Takes a length, `auto`, or an intrinsic keyword.
         */
        "inlineSize"?: BoxSize;
        /**
          * The maximum size on the block axis. Takes a length, `none`, or an intrinsic keyword.
         */
        "maxBlockSize"?: BoxMaxSize;
        /**
          * The maximum size on the inline axis. Takes a length, `none`, or an intrinsic keyword.
         */
        "maxInlineSize"?: BoxMaxSize;
        /**
          * The minimum size on the block axis. Takes a length or an intrinsic keyword.
         */
        "minBlockSize"?: BoxMinSize;
        /**
          * The minimum size on the inline axis. Takes a length or an intrinsic keyword.
         */
        "minInlineSize"?: BoxMinSize;
        /**
          * How content that overflows the surface is handled.
         */
        "overflow"?: | "visible"
    | "hidden"
    | "clip"
    | "auto"
    | "scroll";
        /**
          * The space between the surface edge and its content on both axes. `paddingBlock` and `paddingInline` override it per axis.
          * @default "none"
         */
        "padding"?: BoxPadding;
        /**
          * The space on the block axis. Overrides the block value of `padding`.
         */
        "paddingBlock"?: BoxPadding;
        /**
          * The space on the inline axis. Overrides the inline value of `padding`.
         */
        "paddingInline"?: BoxPadding;
        /**
          * The corner radius.
          * @default "none"
         */
        "radius"?: | "none"
    | "inner"
    | "element"
    | "container"
    | "page"
    | "full";
    }
    /**
     * One step in a breadcrumb trail: a link to a page above the current one, or the current page itself as plain text. Place it directly inside a `dds-breadcrumb-group`, which names the trail and marks the last item as current.
     */
    interface DdsBreadcrumb {
        /**
          * Renders the item inert: it is not focusable and does not navigate.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Opens the link in a new tab and appends an external link icon.
          * @default false
         */
        "external"?: boolean;
        /**
          * The URL to link to. Ignored while `disabled`, and while the item is the current page.
         */
        "href"?: string;
        /**
          * Emitted when the link loses focus.
         */
        "onDdsBlur"?: (event: DdsBreadcrumbCustomEvent<void>) => void;
        /**
          * Emitted when the link gains focus.
         */
        "onDdsFocus"?: (event: DdsBreadcrumbCustomEvent<void>) => void;
    }
    /**
     * Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own.
     */
    interface DdsBreadcrumbGroup {
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface DdsButton {
        /**
          * Prevents interaction and dims the button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Shows a chevron after the label, pointing the way the button opens.
         */
        "disclosure"?: "up" | "down" | "left" | "right" | "up-down";
        /**
          * Stretches the button to the full width of its container.
          * @default false
         */
        "expand"?: boolean;
        /**
          * The destination of the link variant.
         */
        "href"?: string;
        /**
          * The name of an icon shown before the label.
         */
        "icon"?: string;
        /**
          * Shows a spinner and blocks interaction while work is in progress.
          * @default false
         */
        "loading"?: boolean;
        /**
          * The name submitted with the form value.
         */
        "name"?: string;
        /**
          * Emitted when the button loses focus.
         */
        "onDdsBlur"?: (event: DdsButtonCustomEvent<void>) => void;
        /**
          * Emitted when the button gains focus.
         */
        "onDdsFocus"?: (event: DdsButtonCustomEvent<void>) => void;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
        /**
          * Where the link variant opens its destination.
         */
        "target"?: string;
        /**
          * The intent the button conveys.
          * @default "default"
         */
        "tone"?: "default" | "critical";
        /**
          * The native button type. Ignored by the link variant.
          * @default "button"
         */
        "type"?: "button" | "submit" | "reset";
        /**
          * The visual emphasis of the button. The link variant renders an anchor.
          * @default "secondary"
         */
        "variant"?: | "primary"
    | "secondary"
    | "tertiary"
    // | "outline"
    // | "dashed"
    | "plain"
    | "link";
    }
    interface DdsButtonGroup {
        /**
          * @default "auto"
         */
        "gap"?: "auto" | "none";
    }
    /**
     * A slotted surface that groups related content, with optional header and footer regions. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Set `href` to make the whole card a link, and name it with `aria-label`.
     */
    interface DdsCard {
        /**
          * The card's surface colour, as a step on the surface scale.
          * @default "1"
         */
        "background"?: BoxBackground1;
        /**
          * The border width. The border is always solid.
          * @default "s"
         */
        "border"?: BoxBorder1;
        /**
          * The border colour, as a step on the border scale. Has no effect unless `border` is set.
         */
        "borderColor"?: BoxBorderColor1;
        /**
          * Opens the link in a new tab. Has no effect without `href`.
          * @default false
         */
        "external"?: boolean;
        /**
          * The URL the whole card links to. The link takes its accessible name from `aria-label` on the card, since `aria-labelledby` cannot cross the shadow root.
         */
        "href"?: string;
        /**
          * The space between the card's edge and its content.
          * @default "m"
         */
        "padding"?: BoxPadding1;
    }
    /**
     * A single checkbox control for a binary choice, or a partial one when indeterminate. It is form-associated, so it submits its own `name` and `value` and responds to `form.reset()`.
     */
    interface DdsCheckbox {
        /**
          * Whether the checkbox is checked. The attribute is the default; the property follows user input.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Strikes through the label while the checkbox is checked or indeterminate.
          * @default false
         */
        "decoration"?: boolean;
        /**
          * Prevents interaction and removes the checkbox from the tab order.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * An error message shown below the label. While set, the checkbox is invalid, styled as an error and announced as invalid.
         */
        "error"?: string;
        /**
          * The `id` of a `<form>` element to associate this element with.
         */
        "form"?: string;
        /**
          * Supporting text shown below the label and announced as the checkbox's description.
         */
        "hint"?: string;
        /**
          * Shows the partial-selection state. Cleared when the user toggles the checkbox.
          * @default false
         */
        "indeterminate"?: boolean;
        /**
          * The name submitted with the form.
         */
        "name"?: string;
        /**
          * Emitted when the checkbox loses focus.
         */
        "onDdsBlur"?: (event: DdsCheckboxCustomEvent<void>) => void;
        /**
          * Emitted when the user changes the checked state. This event will not emit when programmatically setting the `checked` property.
         */
        "onDdsChange"?: (event: DdsCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
        /**
          * Emitted when the checkbox has focus.
         */
        "onDdsFocus"?: (event: DdsCheckboxCustomEvent<void>) => void;
        /**
          * Prevents the user from changing the checked state while keeping the checkbox focusable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Makes the checkbox invalid until it is checked.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the control's corners are square or fully rounded.
          * @default "square"
         */
        "shape"?: "square" | "circle";
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size"?: "s" | "m";
        /**
          * The value submitted with the form when checked. Submits `on` when omitted.
         */
        "value"?: string;
    }
    /**
     * Groups related `dds-checkbox` members under a shared label, hint and error. Each checkbox stays its own form control and tab stop; the group names them as a set, can disable or lock them together, and owns an explicit error. Selection is read from the members, and the group reports the whole selection through `ddsChange`.
     */
    interface DdsCheckboxGroup {
        /**
          * Disables every member and removes them from the tab order.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * An error message shown below the label. While set, the group is invalid and announced as invalid.
         */
        "error"?: string;
        /**
          * The `id` of a `<form>` element to associate this element with.
         */
        "form"?: string;
        /**
          * Supporting text shown below the label and announced as the group's description.
         */
        "hint"?: string;
        /**
          * The name of the element, used when submitting an HTML form.
         */
        "name"?: string;
        /**
          * Emitted when the user changes any member, with the group's whole selection. The member's own `ddsChange` stops at the group. This event will not emit when programmatically setting a member's `checked` property.
         */
        "onDdsChange"?: (event: DdsCheckboxGroupCustomEvent<CheckboxGroupChangeEventDetail>) => void;
        /**
          * Whether the members stack vertically or flow in a wrapping row.
          * @default "vertical"
         */
        "orientation"?: "vertical" | "horizontal";
        /**
          * Prevents the user from changing any member while keeping them focusable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Sets the shape of every member. Members keep their own shape when omitted.
         */
        "shape"?: "square" | "circle";
        /**
          * Sets the size of every member. Members keep their own size when omitted.
         */
        "size"?: "s" | "m";
    }
    /**
     * A chip is a small inline token that labels a piece of information, such as an attribute or a filter value.
     */
    interface DdsChip {
        /**
          * Shows a dot before the content, coloured by the status.
          * @default false
         */
        "dot"?: boolean;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
        /**
          * The meaning the chip's colour conveys.
          * @default "neutral"
         */
        "status"?: | "neutral"
    | "info"
    | "positive"
    | "warning"
    | "error"
    | "ai";
        /**
          * The visual treatment of the chip. The ghost variant removes the surface fill.
          * @default "default"
         */
        "variant"?: "default" | "ghost";
    }
    interface DdsCode {
    }
    interface DdsColorScheme {
        /**
          * @default "light"
         */
        "theme"?: "light" | "dark";
    }
    interface DdsCountry {
        /**
          * @default "us"
         */
        "code"?: string;
        /**
          * @default "en"
         */
        "language"?: string;
    }
    interface DdsDateTime {
    }
    interface DdsDialog {
    }
    /**
     * A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it.
     */
    interface DdsDivider {
        /**
          * Whether to add standard spacing around the line.
          * @default "none"
         */
        "margin"?: "none" | "normal";
        /**
          * Whether the line runs across the inline axis or down the block axis.
          * @default "horizontal"
         */
        "orientation"?: "horizontal" | "vertical";
    }
    interface DdsFieldset {
        "hint"?: string;
        "legend"?: string;
    }
    interface DdsFlag {
        /**
          * @default "us"
         */
        "code"?: string;
        /**
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
    }
    interface DdsGlobalFrame {
    }
    interface DdsGlobalHeader {
        "logoAlt"?: string | undefined;
        "logoSrc"?: string | undefined;
    }
    interface DdsGlobalNavigation {
    }
    /**
     * A layout container that arranges its children in rows and columns, with a uniform gap and configurable alignment. Place `dds-grid-item` in it to span several columns or rows. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsGrid {
        /**
          * How the rows are distributed on the block axis when the grid is larger than its tracks.
          * @default "normal"
         */
        "alignContent"?: | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How items align within their cell on the block axis.
          * @default "normal"
         */
        "alignItems"?: "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        /**
          * The space between columns, on the inline axis. Overrides the column value of `gap`.
         */
        "columnGap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * The space between rows and columns on both axes. `rowGap` and `columnGap` override it per axis.
          * @default "none"
         */
        "gap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * The column tracks, as a CSS track list such as `repeat(3, 1fr)` or `1fr auto`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser.
         */
        "gridTemplateColumns"?: string;
        /**
          * The row tracks, as a CSS track list such as `auto 1fr`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser.
         */
        "gridTemplateRows"?: string;
        /**
          * How the columns are distributed on the inline axis when the grid is larger than its tracks.
          * @default "normal"
         */
        "justifyContent"?: | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How items align within their cell on the inline axis.
          * @default "normal"
         */
        "justifyItems"?: "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        /**
          * The space between rows, on the block axis. Overrides the row value of `gap`.
         */
        "rowGap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
    }
    /**
     * A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect.
     */
    interface DdsGridItem {
        /**
          * The number of columns the item spans. An integer of 1 or more.
          * @default 1
         */
        "colspan"?: number;
        /**
          * The number of rows the item spans. An integer of 1 or more.
          * @default 1
         */
        "rowspan"?: number;
    }
    /**
     * A page or section heading. `as` chooses the heading level, which is what gives the heading its place in the document outline; `size`, `weight` and `contrast` only style it, so a heading's level and its size are chosen separately.
     * Use for the titles of a page and its sections. Use `dds-text` for body text, captions and inline text.
     */
    interface DdsHeading {
        /**
          * The heading level, which sets the heading's place in the document outline and its default size.
          * @default "h2"
         */
        "as"?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        /**
          * How strongly the heading stands out against its background.
          * @default "high"
         */
        "contrast"?: "high" | "low";
        /**
          * Which step of the type scale to render at. When not set, the size follows `as`.
         */
        "size"?: | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "8xl"
    | "9xl"
    | "10xl";
        /**
          * Overrides the `text-align` the heading would inherit.
         */
        "textAlign"?: "start" | "center" | "end" | "justify";
        /**
          * Overrides the `text-wrap` the heading would inherit.
         */
        "textWrap"?: "wrap" | "nowrap" | "balance" | "pretty";
        /**
          * How heavy the heading is.
          * @default "bold"
         */
        "weight"?: "normal" | "medium" | "semibold" | "bold";
    }
    interface DdsHighlight {
    }
    /**
     * A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name.
     */
    interface DdsIcon {
        /**
          * Which colour role the glyph takes, or `inherit` to follow the surrounding text colour.
          * @default "inherit"
         */
        "color"?: | "inherit"
    | "primary"
    | "secondary"
    | "tertiary"
    | "disabled"
    | "success"
    | "error"
    | "warning";
        /**
          * The key of the glyph to draw from the icon set.
         */
        "name": string;
        /**
          * Which step of the size scale to render at.
          * @default "m"
         */
        "size"?: "2xs" | "xs" | "s" | "m" | "l";
    }
    interface DdsKeyboard {
    }
    interface DdsLabel {
    }
    /**
     * A navigational element that takes users to another page or resource, most often placed within or directly following a sentence.
     */
    interface DdsLink {
        /**
          * Renders the link inert: it is not focusable and does not navigate.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Opens the link in a new tab and appends an external link icon.
          * @default false
         */
        "external"?: boolean;
        /**
          * The URL to link to. Ignored while `disabled`.
         */
        "href"?: string;
        /**
          * Name of the icon to display after the link label.
         */
        "iconEnd"?: string;
        /**
          * Name of the icon to display before the link label.
         */
        "iconStart"?: string;
        /**
          * Controls the visual size of the link.
          * @default "m"
         */
        "size"?: "s" | "m";
        /**
          * Controls the visual style of the link.
          * @default "default"
         */
        "variant"?: "default" | "subtle" | "ai";
    }
    interface DdsMeter {
    }
    interface DdsNavigation {
    }
    interface DdsNumber {
    }
    interface DdsPagination {
    }
    /**
     * A popover is a floating panel anchored to a trigger that reveals contextual information or secondary actions on demand. It opens in the browser's top layer and closes on `Esc` or a click outside.
     */
    interface DdsPopover {
        /**
          * Fires after the panel closes, whether a user or a change to `open` closed it.
         */
        "onDdsPopoverDidClose"?: (event: DdsPopoverCustomEvent<void>) => void;
        /**
          * Fires after the panel opens, whether a user or a change to `open` opened it.
         */
        "onDdsPopoverDidOpen"?: (event: DdsPopoverCustomEvent<void>) => void;
        /**
          * Fires before the panel opens. Cancel it with `preventDefault()` to keep the panel closed.
         */
        "onDdsPopoverWillOpen"?: (event: DdsPopoverCustomEvent<void>) => void;
        /**
          * Whether the panel is open. The attribute follows the user opening and closing the panel, and setting it opens or closes the panel.
          * @default false
         */
        "open"?: boolean;
        /**
          * The preferred side and alignment of the panel relative to the trigger. The panel flips to stay in view.
          * @default "bottom"
         */
        "placement"?: | "top"
    | "top-start"
    | "top-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end";
    }
    interface DdsProgressCircle {
    }
    interface DdsRadio {
    }
    interface DdsRadioGroup {
    }
    interface DdsRoot {
    }
    interface DdsSegmentedControl {
    }
    interface DdsSegmentedControlGroup {
    }
    interface DdsSparkline {
        "color"?: string;
        /**
          * @default "line"
         */
        "type"?: SparklineType;
    }
    interface DdsSpinner {
        /**
          * @default 'normal'
         */
        "duration"?: 'slow' | 'normal' | 'fast';
        /**
          * @default "m"
         */
        "size"?: "2xs" | "xs" | "s" | "m" | "l";
    }
    /**
     * A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
     */
    interface DdsStack {
        /**
          * How wrapped lines are distributed on the axis perpendicular to `direction`. Has no effect unless `wrap` is set.
          * @default "normal"
         */
        "alignContent"?: | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * How children align on the axis perpendicular to `direction`.
          * @default "normal"
         */
        "alignItems"?: | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "normal";
        /**
          * The space between columns, on the inline axis. Overrides the column value of `gap`.
         */
        "columnGap"?: | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        /**
          * The axis children are placed along: `block` stacks them vertically, `inline` places them in a row.
          * @default "block"
         */
        "direction"?: "block" | "inline";
        /**
          * The space between children on both axes. `rowGap` and `columnGap` override it per axis.
          * @default "none"
         */
        "gap"?: "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        /**
          * How children are distributed along `direction`.
          * @default "normal"
         */
        "justifyContent"?: | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        /**
          * The space between rows, on the block axis. Overrides the row value of `gap`.
         */
        "rowGap"?: | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        /**
          * Whether children flow onto the next line when they do not fit.
          * @default false
         */
        "wrap"?: boolean;
    }
    interface DdsSwitch {
        "label"?: string;
        /**
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
    }
    interface DdsTab {
        /**
          * @default "light"
         */
        "theme"?: "light" | "dark";
    }
    interface DdsTabGroup {
    }
    /**
     * Body text for the interface, set in the design system's type scale: paragraphs, captions, supporting copy and inline emphasis.
     * `as` chooses the element, which gives the text its meaning and decides whether it sits on its own line or inside one. `size`, `weight` and `contrast` only change how it looks.
     * Use it for any text that needs design system styling, and a plain HTML element where it doesn't. For headings use `dds-heading`.
     */
    interface DdsText {
        /**
          * The element the text renders as, which sets its meaning and whether it is a block or inline.
          * @default "span"
         */
        "as"?: | "p"
    | "span"
    | "div"
    | "strong"
    | "em"
    | "small";
        /**
          * How strongly the text stands out against its background.
          * @default "high"
         */
        "contrast"?: "high" | "low";
        /**
          * The `font-variant-numeric` property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. - `auto`: The default value. The browser determines whether to use alternate glyphs based on the font and context. - `tabular-nums`: Uses fixed-width digits, which are ideal for aligning numbers in tables or lists. - `diagonal-fractions`: Uses diagonal fraction glyphs, which are ideal for displaying fractions in a more compact and visually appealing way. For more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).
          * @default "auto"
         */
        "fontVariantNumeric"?: | "auto"
    | "tabular-nums"
    | "diagonal-fractions";
        /**
          * Which step of the type scale to render at. Each step carries its own line height.
          * @default "m"
         */
        "size"?: "xs" | "s" | "m" | "l";
        /**
          * Overrides the `text-align` the text would inherit.
         */
        "textAlign"?: "start" | "center" | "end" | "justify";
        /**
          * Overrides the `text-wrap` the text would inherit.
         */
        "textWrap"?: "wrap" | "nowrap" | "balance" | "pretty";
        /**
          * How heavy the text is.
          * @default "normal"
         */
        "weight"?: "normal" | "medium" | "semibold" | "bold";
    }
    interface DdsTextField {
    }
    /**
     * A tooltip is a short floating label that explains the element it is anchored to. It opens while a pointer is over the trigger or focus is inside it, and closes on `Esc`. It is a visual aid only: link the content to the trigger with `aria-describedby` so assistive technology announces it, and give a trigger that is not natively focusable `tabindex="0"`.
     */
    interface DdsTooltip {
        /**
          * The side of the trigger the tooltip prefers. It flips to stay in view.
          * @default "top"
         */
        "placement"?: "top" | "start" | "end" | "bottom";
        /**
          * The maximum width of the tooltip.
          * @default "m"
         */
        "size"?: "s" | "m" | "l";
    }

    interface DdsAvatarAttributes {
        "name": string;
        "src": string;
        "fallbackSrc": string;
        "size": "xs" | "s" | "m" | "l" | "xl" | "2xl";
        "shape": "circle" | "square";
        "showName": boolean;
    }
    interface DdsAvatarGroupAttributes {
        "tone": "info" | "success" | "warning" | "error";
    }
    interface DdsBannerAttributes {
        "tone": "info" | "success" | "warning" | "error";
    }
    interface DdsBoxAttributes {
        "padding": BoxPadding;
        "paddingBlock": BoxPadding;
        "paddingInline": BoxPadding;
        "background": BoxBackground;
        "border": BoxBorder;
        "borderColor": BoxBorderColor;
        "radius": | "none"
    | "inner"
    | "element"
    | "container"
    | "page"
    | "full";
        "overflow": | "visible"
    | "hidden"
    | "clip"
    | "auto"
    | "scroll";
        "display": "auto" | "none";
        "inlineSize": BoxSize;
        "blockSize": BoxSize;
        "minInlineSize": BoxMinSize;
        "minBlockSize": BoxMinSize;
        "maxInlineSize": BoxMaxSize;
        "maxBlockSize": BoxMaxSize;
    }
    interface DdsBreadcrumbAttributes {
        "href": string;
        "external": boolean;
        "disabled": boolean;
    }
    interface DdsButtonAttributes {
        "type": "button" | "submit" | "reset";
        "variant": | "primary"
    | "secondary"
    | "tertiary"
    // | "outline"
    // | "dashed"
    | "plain"
    | "link";
        "tone": "default" | "critical";
        "size": "s" | "m" | "l";
        "disclosure": "up" | "down" | "left" | "right" | "up-down";
        "loading": boolean;
        "disabled": boolean;
        "expand": boolean;
        "name": string;
        "target": string;
        "icon": string;
        "href": string;
    }
    interface DdsButtonGroupAttributes {
        "gap": "auto" | "none";
    }
    interface DdsCardAttributes {
        "padding": BoxPadding;
        "background": BoxBackground;
        "border": BoxBorder;
        "borderColor": BoxBorderColor;
        "href": string;
        "external": boolean;
    }
    interface DdsCheckboxAttributes {
        "checked": boolean;
        "indeterminate": boolean;
        "disabled": boolean;
        "readonly": boolean;
        "required": boolean;
        "hint": string;
        "error": string;
        "name": string;
        "value": string;
        "size": "s" | "m";
        "shape": "square" | "circle";
        "decoration": boolean;
    }
    interface DdsCheckboxGroupAttributes {
        "orientation": "vertical" | "horizontal";
        "size": "s" | "m";
        "shape": "square" | "circle";
        "disabled": boolean;
        "readonly": boolean;
        "hint": string;
        "error": string;
    }
    interface DdsChipAttributes {
        "status": | "neutral"
    | "info"
    | "positive"
    | "warning"
    | "error"
    | "ai";
        "variant": "default" | "ghost";
        "size": "s" | "m" | "l";
        "dot": boolean;
    }
    interface DdsColorSchemeAttributes {
        "theme": "light" | "dark";
    }
    interface DdsCountryAttributes {
        "code": string;
        "language": string;
    }
    interface DdsDividerAttributes {
        "orientation": "horizontal" | "vertical";
        "margin": "none" | "normal";
    }
    interface DdsFieldsetAttributes {
        "hint": string;
        "legend": string;
    }
    interface DdsFlagAttributes {
        "code": string;
        "size": "s" | "m" | "l";
    }
    interface DdsGlobalHeaderAttributes {
        "logoSrc": string | undefined;
        "logoAlt": string | undefined;
    }
    interface DdsGridAttributes {
        "gridTemplateColumns": string;
        "gridTemplateRows": string;
        "gap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        "rowGap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        "columnGap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        "alignItems": "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        "justifyItems": "start" | "end" | "center" | "stretch" | "baseline" | "normal";
        "alignContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        "justifyContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
    }
    interface DdsGridItemAttributes {
        "colspan": number;
        "rowspan": number;
    }
    interface DdsHeadingAttributes {
        "as": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        "size": | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl"
    | "8xl"
    | "9xl"
    | "10xl";
        "weight": "normal" | "medium" | "semibold" | "bold";
        "contrast": "high" | "low";
        "textAlign": "start" | "center" | "end" | "justify";
        "textWrap": "wrap" | "nowrap" | "balance" | "pretty";
    }
    interface DdsIconAttributes {
        "size": "2xs" | "xs" | "s" | "m" | "l";
        "name": string;
        "color": | "inherit"
    | "primary"
    | "secondary"
    | "tertiary"
    | "disabled"
    | "success"
    | "error"
    | "warning";
    }
    interface DdsLinkAttributes {
        "href": string;
        "disabled": boolean;
        "external": boolean;
        "variant": "default" | "subtle" | "ai";
        "size": "s" | "m";
        "iconStart": string;
        "iconEnd": string;
    }
    interface DdsPopoverAttributes {
        "open": boolean;
        "placement": | "top"
    | "top-start"
    | "top-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end";
    }
    interface DdsSparklineAttributes {
        "color": string;
        "type": SparklineType;
    }
    interface DdsSpinnerAttributes {
        "size": "2xs" | "xs" | "s" | "m" | "l";
        "duration": 'slow' | 'normal' | 'fast';
    }
    interface DdsStackAttributes {
        "direction": "block" | "inline";
        "wrap": boolean;
        "gap": "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl";
        "rowGap": | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        "columnGap": | "none"
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl";
        "alignItems": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "normal";
        "alignContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
        "justifyContent": | "start"
    | "end"
    | "center"
    | "stretch"
    | "baseline"
    | "space-between"
    | "space-around"
    | "space-evenly"
    | "normal";
    }
    interface DdsSwitchAttributes {
        "size": "s" | "m" | "l";
        "label": string;
    }
    interface DdsTabAttributes {
        "theme": "light" | "dark";
    }
    interface DdsTextAttributes {
        "as": | "p"
    | "span"
    | "div"
    | "strong"
    | "em"
    | "small";
        "size": "xs" | "s" | "m" | "l";
        "weight": "normal" | "medium" | "semibold" | "bold";
        "contrast": "high" | "low";
        "textAlign": "start" | "center" | "end" | "justify";
        "textWrap": "wrap" | "nowrap" | "balance" | "pretty";
        "fontVariantNumeric": | "auto"
    | "tabular-nums"
    | "diagonal-fractions";
    }
    interface DdsTooltipAttributes {
        "placement": "top" | "start" | "end" | "bottom";
        "size": "s" | "m" | "l";
    }

    interface IntrinsicElements {
        "dds-accordion": DdsAccordion;
        "dds-accordion-group": DdsAccordionGroup;
        "dds-attachment": DdsAttachment;
        "dds-avatar": Omit<DdsAvatar, keyof DdsAvatarAttributes> & { [K in keyof DdsAvatar & keyof DdsAvatarAttributes]?: DdsAvatar[K] } & { [K in keyof DdsAvatar & keyof DdsAvatarAttributes as `attr:${K}`]?: DdsAvatarAttributes[K] } & { [K in keyof DdsAvatar & keyof DdsAvatarAttributes as `prop:${K}`]?: DdsAvatar[K] };
        "dds-avatar-group": Omit<DdsAvatarGroup, keyof DdsAvatarGroupAttributes> & { [K in keyof DdsAvatarGroup & keyof DdsAvatarGroupAttributes]?: DdsAvatarGroup[K] } & { [K in keyof DdsAvatarGroup & keyof DdsAvatarGroupAttributes as `attr:${K}`]?: DdsAvatarGroupAttributes[K] } & { [K in keyof DdsAvatarGroup & keyof DdsAvatarGroupAttributes as `prop:${K}`]?: DdsAvatarGroup[K] };
        "dds-banner": Omit<DdsBanner, keyof DdsBannerAttributes> & { [K in keyof DdsBanner & keyof DdsBannerAttributes]?: DdsBanner[K] } & { [K in keyof DdsBanner & keyof DdsBannerAttributes as `attr:${K}`]?: DdsBannerAttributes[K] } & { [K in keyof DdsBanner & keyof DdsBannerAttributes as `prop:${K}`]?: DdsBanner[K] };
        "dds-box": Omit<DdsBox, keyof DdsBoxAttributes> & { [K in keyof DdsBox & keyof DdsBoxAttributes]?: DdsBox[K] } & { [K in keyof DdsBox & keyof DdsBoxAttributes as `attr:${K}`]?: DdsBoxAttributes[K] } & { [K in keyof DdsBox & keyof DdsBoxAttributes as `prop:${K}`]?: DdsBox[K] };
        "dds-breadcrumb": Omit<DdsBreadcrumb, keyof DdsBreadcrumbAttributes> & { [K in keyof DdsBreadcrumb & keyof DdsBreadcrumbAttributes]?: DdsBreadcrumb[K] } & { [K in keyof DdsBreadcrumb & keyof DdsBreadcrumbAttributes as `attr:${K}`]?: DdsBreadcrumbAttributes[K] } & { [K in keyof DdsBreadcrumb & keyof DdsBreadcrumbAttributes as `prop:${K}`]?: DdsBreadcrumb[K] };
        "dds-breadcrumb-group": DdsBreadcrumbGroup;
        "dds-button": Omit<DdsButton, keyof DdsButtonAttributes> & { [K in keyof DdsButton & keyof DdsButtonAttributes]?: DdsButton[K] } & { [K in keyof DdsButton & keyof DdsButtonAttributes as `attr:${K}`]?: DdsButtonAttributes[K] } & { [K in keyof DdsButton & keyof DdsButtonAttributes as `prop:${K}`]?: DdsButton[K] };
        "dds-button-group": Omit<DdsButtonGroup, keyof DdsButtonGroupAttributes> & { [K in keyof DdsButtonGroup & keyof DdsButtonGroupAttributes]?: DdsButtonGroup[K] } & { [K in keyof DdsButtonGroup & keyof DdsButtonGroupAttributes as `attr:${K}`]?: DdsButtonGroupAttributes[K] } & { [K in keyof DdsButtonGroup & keyof DdsButtonGroupAttributes as `prop:${K}`]?: DdsButtonGroup[K] };
        "dds-card": Omit<DdsCard, keyof DdsCardAttributes> & { [K in keyof DdsCard & keyof DdsCardAttributes]?: DdsCard[K] } & { [K in keyof DdsCard & keyof DdsCardAttributes as `attr:${K}`]?: DdsCardAttributes[K] } & { [K in keyof DdsCard & keyof DdsCardAttributes as `prop:${K}`]?: DdsCard[K] };
        "dds-checkbox": Omit<DdsCheckbox, keyof DdsCheckboxAttributes> & { [K in keyof DdsCheckbox & keyof DdsCheckboxAttributes]?: DdsCheckbox[K] } & { [K in keyof DdsCheckbox & keyof DdsCheckboxAttributes as `attr:${K}`]?: DdsCheckboxAttributes[K] } & { [K in keyof DdsCheckbox & keyof DdsCheckboxAttributes as `prop:${K}`]?: DdsCheckbox[K] };
        "dds-checkbox-group": Omit<DdsCheckboxGroup, keyof DdsCheckboxGroupAttributes> & { [K in keyof DdsCheckboxGroup & keyof DdsCheckboxGroupAttributes]?: DdsCheckboxGroup[K] } & { [K in keyof DdsCheckboxGroup & keyof DdsCheckboxGroupAttributes as `attr:${K}`]?: DdsCheckboxGroupAttributes[K] } & { [K in keyof DdsCheckboxGroup & keyof DdsCheckboxGroupAttributes as `prop:${K}`]?: DdsCheckboxGroup[K] };
        "dds-chip": Omit<DdsChip, keyof DdsChipAttributes> & { [K in keyof DdsChip & keyof DdsChipAttributes]?: DdsChip[K] } & { [K in keyof DdsChip & keyof DdsChipAttributes as `attr:${K}`]?: DdsChipAttributes[K] } & { [K in keyof DdsChip & keyof DdsChipAttributes as `prop:${K}`]?: DdsChip[K] };
        "dds-code": DdsCode;
        "dds-color-scheme": Omit<DdsColorScheme, keyof DdsColorSchemeAttributes> & { [K in keyof DdsColorScheme & keyof DdsColorSchemeAttributes]?: DdsColorScheme[K] } & { [K in keyof DdsColorScheme & keyof DdsColorSchemeAttributes as `attr:${K}`]?: DdsColorSchemeAttributes[K] } & { [K in keyof DdsColorScheme & keyof DdsColorSchemeAttributes as `prop:${K}`]?: DdsColorScheme[K] };
        "dds-country": Omit<DdsCountry, keyof DdsCountryAttributes> & { [K in keyof DdsCountry & keyof DdsCountryAttributes]?: DdsCountry[K] } & { [K in keyof DdsCountry & keyof DdsCountryAttributes as `attr:${K}`]?: DdsCountryAttributes[K] } & { [K in keyof DdsCountry & keyof DdsCountryAttributes as `prop:${K}`]?: DdsCountry[K] };
        "dds-date-time": DdsDateTime;
        "dds-dialog": DdsDialog;
        "dds-divider": Omit<DdsDivider, keyof DdsDividerAttributes> & { [K in keyof DdsDivider & keyof DdsDividerAttributes]?: DdsDivider[K] } & { [K in keyof DdsDivider & keyof DdsDividerAttributes as `attr:${K}`]?: DdsDividerAttributes[K] } & { [K in keyof DdsDivider & keyof DdsDividerAttributes as `prop:${K}`]?: DdsDivider[K] };
        "dds-fieldset": Omit<DdsFieldset, keyof DdsFieldsetAttributes> & { [K in keyof DdsFieldset & keyof DdsFieldsetAttributes]?: DdsFieldset[K] } & { [K in keyof DdsFieldset & keyof DdsFieldsetAttributes as `attr:${K}`]?: DdsFieldsetAttributes[K] } & { [K in keyof DdsFieldset & keyof DdsFieldsetAttributes as `prop:${K}`]?: DdsFieldset[K] };
        "dds-flag": Omit<DdsFlag, keyof DdsFlagAttributes> & { [K in keyof DdsFlag & keyof DdsFlagAttributes]?: DdsFlag[K] } & { [K in keyof DdsFlag & keyof DdsFlagAttributes as `attr:${K}`]?: DdsFlagAttributes[K] } & { [K in keyof DdsFlag & keyof DdsFlagAttributes as `prop:${K}`]?: DdsFlag[K] };
        "dds-global-frame": DdsGlobalFrame;
        "dds-global-header": Omit<DdsGlobalHeader, keyof DdsGlobalHeaderAttributes> & { [K in keyof DdsGlobalHeader & keyof DdsGlobalHeaderAttributes]?: DdsGlobalHeader[K] } & { [K in keyof DdsGlobalHeader & keyof DdsGlobalHeaderAttributes as `attr:${K}`]?: DdsGlobalHeaderAttributes[K] } & { [K in keyof DdsGlobalHeader & keyof DdsGlobalHeaderAttributes as `prop:${K}`]?: DdsGlobalHeader[K] };
        "dds-global-navigation": DdsGlobalNavigation;
        "dds-grid": Omit<DdsGrid, keyof DdsGridAttributes> & { [K in keyof DdsGrid & keyof DdsGridAttributes]?: DdsGrid[K] } & { [K in keyof DdsGrid & keyof DdsGridAttributes as `attr:${K}`]?: DdsGridAttributes[K] } & { [K in keyof DdsGrid & keyof DdsGridAttributes as `prop:${K}`]?: DdsGrid[K] };
        "dds-grid-item": Omit<DdsGridItem, keyof DdsGridItemAttributes> & { [K in keyof DdsGridItem & keyof DdsGridItemAttributes]?: DdsGridItem[K] } & { [K in keyof DdsGridItem & keyof DdsGridItemAttributes as `attr:${K}`]?: DdsGridItemAttributes[K] } & { [K in keyof DdsGridItem & keyof DdsGridItemAttributes as `prop:${K}`]?: DdsGridItem[K] };
        "dds-heading": Omit<DdsHeading, keyof DdsHeadingAttributes> & { [K in keyof DdsHeading & keyof DdsHeadingAttributes]?: DdsHeading[K] } & { [K in keyof DdsHeading & keyof DdsHeadingAttributes as `attr:${K}`]?: DdsHeadingAttributes[K] } & { [K in keyof DdsHeading & keyof DdsHeadingAttributes as `prop:${K}`]?: DdsHeading[K] };
        "dds-highlight": DdsHighlight;
        "dds-icon": Omit<DdsIcon, keyof DdsIconAttributes> & { [K in keyof DdsIcon & keyof DdsIconAttributes]?: DdsIcon[K] } & { [K in keyof DdsIcon & keyof DdsIconAttributes as `attr:${K}`]?: DdsIconAttributes[K] } & { [K in keyof DdsIcon & keyof DdsIconAttributes as `prop:${K}`]?: DdsIcon[K] } & OneOf<"name", DdsIcon["name"], DdsIconAttributes["name"]>;
        "dds-keyboard": DdsKeyboard;
        "dds-label": DdsLabel;
        "dds-link": Omit<DdsLink, keyof DdsLinkAttributes> & { [K in keyof DdsLink & keyof DdsLinkAttributes]?: DdsLink[K] } & { [K in keyof DdsLink & keyof DdsLinkAttributes as `attr:${K}`]?: DdsLinkAttributes[K] } & { [K in keyof DdsLink & keyof DdsLinkAttributes as `prop:${K}`]?: DdsLink[K] };
        "dds-meter": DdsMeter;
        "dds-navigation": DdsNavigation;
        "dds-number": DdsNumber;
        "dds-pagination": DdsPagination;
        "dds-popover": Omit<DdsPopover, keyof DdsPopoverAttributes> & { [K in keyof DdsPopover & keyof DdsPopoverAttributes]?: DdsPopover[K] } & { [K in keyof DdsPopover & keyof DdsPopoverAttributes as `attr:${K}`]?: DdsPopoverAttributes[K] } & { [K in keyof DdsPopover & keyof DdsPopoverAttributes as `prop:${K}`]?: DdsPopover[K] };
        "dds-progress-circle": DdsProgressCircle;
        "dds-radio": DdsRadio;
        "dds-radio-group": DdsRadioGroup;
        "dds-root": DdsRoot;
        "dds-segmented-control": DdsSegmentedControl;
        "dds-segmented-control-group": DdsSegmentedControlGroup;
        "dds-sparkline": Omit<DdsSparkline, keyof DdsSparklineAttributes> & { [K in keyof DdsSparkline & keyof DdsSparklineAttributes]?: DdsSparkline[K] } & { [K in keyof DdsSparkline & keyof DdsSparklineAttributes as `attr:${K}`]?: DdsSparklineAttributes[K] } & { [K in keyof DdsSparkline & keyof DdsSparklineAttributes as `prop:${K}`]?: DdsSparkline[K] };
        "dds-spinner": Omit<DdsSpinner, keyof DdsSpinnerAttributes> & { [K in keyof DdsSpinner & keyof DdsSpinnerAttributes]?: DdsSpinner[K] } & { [K in keyof DdsSpinner & keyof DdsSpinnerAttributes as `attr:${K}`]?: DdsSpinnerAttributes[K] } & { [K in keyof DdsSpinner & keyof DdsSpinnerAttributes as `prop:${K}`]?: DdsSpinner[K] };
        "dds-stack": Omit<DdsStack, keyof DdsStackAttributes> & { [K in keyof DdsStack & keyof DdsStackAttributes]?: DdsStack[K] } & { [K in keyof DdsStack & keyof DdsStackAttributes as `attr:${K}`]?: DdsStackAttributes[K] } & { [K in keyof DdsStack & keyof DdsStackAttributes as `prop:${K}`]?: DdsStack[K] };
        "dds-switch": Omit<DdsSwitch, keyof DdsSwitchAttributes> & { [K in keyof DdsSwitch & keyof DdsSwitchAttributes]?: DdsSwitch[K] } & { [K in keyof DdsSwitch & keyof DdsSwitchAttributes as `attr:${K}`]?: DdsSwitchAttributes[K] } & { [K in keyof DdsSwitch & keyof DdsSwitchAttributes as `prop:${K}`]?: DdsSwitch[K] };
        "dds-tab": Omit<DdsTab, keyof DdsTabAttributes> & { [K in keyof DdsTab & keyof DdsTabAttributes]?: DdsTab[K] } & { [K in keyof DdsTab & keyof DdsTabAttributes as `attr:${K}`]?: DdsTabAttributes[K] } & { [K in keyof DdsTab & keyof DdsTabAttributes as `prop:${K}`]?: DdsTab[K] };
        "dds-tab-group": DdsTabGroup;
        "dds-text": Omit<DdsText, keyof DdsTextAttributes> & { [K in keyof DdsText & keyof DdsTextAttributes]?: DdsText[K] } & { [K in keyof DdsText & keyof DdsTextAttributes as `attr:${K}`]?: DdsTextAttributes[K] } & { [K in keyof DdsText & keyof DdsTextAttributes as `prop:${K}`]?: DdsText[K] };
        "dds-text-field": DdsTextField;
        "dds-tooltip": Omit<DdsTooltip, keyof DdsTooltipAttributes> & { [K in keyof DdsTooltip & keyof DdsTooltipAttributes]?: DdsTooltip[K] } & { [K in keyof DdsTooltip & keyof DdsTooltipAttributes as `attr:${K}`]?: DdsTooltipAttributes[K] } & { [K in keyof DdsTooltip & keyof DdsTooltipAttributes as `prop:${K}`]?: DdsTooltip[K] };
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "dds-accordion": LocalJSX.IntrinsicElements["dds-accordion"] & JSXBase.HTMLAttributes<HTMLDdsAccordionElement>;
            "dds-accordion-group": LocalJSX.IntrinsicElements["dds-accordion-group"] & JSXBase.HTMLAttributes<HTMLDdsAccordionGroupElement>;
            "dds-attachment": LocalJSX.IntrinsicElements["dds-attachment"] & JSXBase.HTMLAttributes<HTMLDdsAttachmentElement>;
            /**
             * A person's avatar: their image, falling back to their initials, falling back to a generic placeholder. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name; `name` never becomes the accessible name.
             */
            "dds-avatar": LocalJSX.IntrinsicElements["dds-avatar"] & JSXBase.HTMLAttributes<HTMLDdsAvatarElement>;
            "dds-avatar-group": LocalJSX.IntrinsicElements["dds-avatar-group"] & JSXBase.HTMLAttributes<HTMLDdsAvatarGroupElement>;
            "dds-banner": LocalJSX.IntrinsicElements["dds-banner"] & JSXBase.HTMLAttributes<HTMLDdsBannerElement>;
            /**
             * A surface primitive: a block container with token-scaled padding, background, border and radius, and no layout opinion of its own. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
             */
            "dds-box": LocalJSX.IntrinsicElements["dds-box"] & JSXBase.HTMLAttributes<HTMLDdsBoxElement>;
            /**
             * One step in a breadcrumb trail: a link to a page above the current one, or the current page itself as plain text. Place it directly inside a `dds-breadcrumb-group`, which names the trail and marks the last item as current.
             */
            "dds-breadcrumb": LocalJSX.IntrinsicElements["dds-breadcrumb"] & JSXBase.HTMLAttributes<HTMLDdsBreadcrumbElement>;
            /**
             * Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own.
             */
            "dds-breadcrumb-group": LocalJSX.IntrinsicElements["dds-breadcrumb-group"] & JSXBase.HTMLAttributes<HTMLDdsBreadcrumbGroupElement>;
            /**
             * The button is an interactive object that emphasizes an action.
             */
            "dds-button": LocalJSX.IntrinsicElements["dds-button"] & JSXBase.HTMLAttributes<HTMLDdsButtonElement>;
            "dds-button-group": LocalJSX.IntrinsicElements["dds-button-group"] & JSXBase.HTMLAttributes<HTMLDdsButtonGroupElement>;
            /**
             * A slotted surface that groups related content, with optional header and footer regions. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Set `href` to make the whole card a link, and name it with `aria-label`.
             */
            "dds-card": LocalJSX.IntrinsicElements["dds-card"] & JSXBase.HTMLAttributes<HTMLDdsCardElement>;
            /**
             * A single checkbox control for a binary choice, or a partial one when indeterminate. It is form-associated, so it submits its own `name` and `value` and responds to `form.reset()`.
             */
            "dds-checkbox": LocalJSX.IntrinsicElements["dds-checkbox"] & JSXBase.HTMLAttributes<HTMLDdsCheckboxElement>;
            /**
             * Groups related `dds-checkbox` members under a shared label, hint and error. Each checkbox stays its own form control and tab stop; the group names them as a set, can disable or lock them together, and owns an explicit error. Selection is read from the members, and the group reports the whole selection through `ddsChange`.
             */
            "dds-checkbox-group": LocalJSX.IntrinsicElements["dds-checkbox-group"] & JSXBase.HTMLAttributes<HTMLDdsCheckboxGroupElement>;
            /**
             * A chip is a small inline token that labels a piece of information, such as an attribute or a filter value.
             */
            "dds-chip": LocalJSX.IntrinsicElements["dds-chip"] & JSXBase.HTMLAttributes<HTMLDdsChipElement>;
            "dds-code": LocalJSX.IntrinsicElements["dds-code"] & JSXBase.HTMLAttributes<HTMLDdsCodeElement>;
            "dds-color-scheme": LocalJSX.IntrinsicElements["dds-color-scheme"] & JSXBase.HTMLAttributes<HTMLDdsColorSchemeElement>;
            "dds-country": LocalJSX.IntrinsicElements["dds-country"] & JSXBase.HTMLAttributes<HTMLDdsCountryElement>;
            "dds-date-time": LocalJSX.IntrinsicElements["dds-date-time"] & JSXBase.HTMLAttributes<HTMLDdsDateTimeElement>;
            "dds-dialog": LocalJSX.IntrinsicElements["dds-dialog"] & JSXBase.HTMLAttributes<HTMLDdsDialogElement>;
            /**
             * A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it.
             */
            "dds-divider": LocalJSX.IntrinsicElements["dds-divider"] & JSXBase.HTMLAttributes<HTMLDdsDividerElement>;
            "dds-fieldset": LocalJSX.IntrinsicElements["dds-fieldset"] & JSXBase.HTMLAttributes<HTMLDdsFieldsetElement>;
            "dds-flag": LocalJSX.IntrinsicElements["dds-flag"] & JSXBase.HTMLAttributes<HTMLDdsFlagElement>;
            "dds-global-frame": LocalJSX.IntrinsicElements["dds-global-frame"] & JSXBase.HTMLAttributes<HTMLDdsGlobalFrameElement>;
            "dds-global-header": LocalJSX.IntrinsicElements["dds-global-header"] & JSXBase.HTMLAttributes<HTMLDdsGlobalHeaderElement>;
            "dds-global-navigation": LocalJSX.IntrinsicElements["dds-global-navigation"] & JSXBase.HTMLAttributes<HTMLDdsGlobalNavigationElement>;
            /**
             * A layout container that arranges its children in rows and columns, with a uniform gap and configurable alignment. Place `dds-grid-item` in it to span several columns or rows. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
             */
            "dds-grid": LocalJSX.IntrinsicElements["dds-grid"] & JSXBase.HTMLAttributes<HTMLDdsGridElement>;
            /**
             * A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect.
             */
            "dds-grid-item": LocalJSX.IntrinsicElements["dds-grid-item"] & JSXBase.HTMLAttributes<HTMLDdsGridItemElement>;
            /**
             * A page or section heading. `as` chooses the heading level, which is what gives the heading its place in the document outline; `size`, `weight` and `contrast` only style it, so a heading's level and its size are chosen separately.
             * Use for the titles of a page and its sections. Use `dds-text` for body text, captions and inline text.
             */
            "dds-heading": LocalJSX.IntrinsicElements["dds-heading"] & JSXBase.HTMLAttributes<HTMLDdsHeadingElement>;
            "dds-highlight": LocalJSX.IntrinsicElements["dds-highlight"] & JSXBase.HTMLAttributes<HTMLDdsHighlightElement>;
            /**
             * A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name.
             */
            "dds-icon": LocalJSX.IntrinsicElements["dds-icon"] & JSXBase.HTMLAttributes<HTMLDdsIconElement>;
            "dds-keyboard": LocalJSX.IntrinsicElements["dds-keyboard"] & JSXBase.HTMLAttributes<HTMLDdsKeyboardElement>;
            "dds-label": LocalJSX.IntrinsicElements["dds-label"] & JSXBase.HTMLAttributes<HTMLDdsLabelElement>;
            /**
             * A navigational element that takes users to another page or resource, most often placed within or directly following a sentence.
             */
            "dds-link": LocalJSX.IntrinsicElements["dds-link"] & JSXBase.HTMLAttributes<HTMLDdsLinkElement>;
            "dds-meter": LocalJSX.IntrinsicElements["dds-meter"] & JSXBase.HTMLAttributes<HTMLDdsMeterElement>;
            "dds-navigation": LocalJSX.IntrinsicElements["dds-navigation"] & JSXBase.HTMLAttributes<HTMLDdsNavigationElement>;
            "dds-number": LocalJSX.IntrinsicElements["dds-number"] & JSXBase.HTMLAttributes<HTMLDdsNumberElement>;
            "dds-pagination": LocalJSX.IntrinsicElements["dds-pagination"] & JSXBase.HTMLAttributes<HTMLDdsPaginationElement>;
            /**
             * A popover is a floating panel anchored to a trigger that reveals contextual information or secondary actions on demand. It opens in the browser's top layer and closes on `Esc` or a click outside.
             */
            "dds-popover": LocalJSX.IntrinsicElements["dds-popover"] & JSXBase.HTMLAttributes<HTMLDdsPopoverElement>;
            "dds-progress-circle": LocalJSX.IntrinsicElements["dds-progress-circle"] & JSXBase.HTMLAttributes<HTMLDdsProgressCircleElement>;
            "dds-radio": LocalJSX.IntrinsicElements["dds-radio"] & JSXBase.HTMLAttributes<HTMLDdsRadioElement>;
            "dds-radio-group": LocalJSX.IntrinsicElements["dds-radio-group"] & JSXBase.HTMLAttributes<HTMLDdsRadioGroupElement>;
            "dds-root": LocalJSX.IntrinsicElements["dds-root"] & JSXBase.HTMLAttributes<HTMLDdsRootElement>;
            "dds-segmented-control": LocalJSX.IntrinsicElements["dds-segmented-control"] & JSXBase.HTMLAttributes<HTMLDdsSegmentedControlElement>;
            "dds-segmented-control-group": LocalJSX.IntrinsicElements["dds-segmented-control-group"] & JSXBase.HTMLAttributes<HTMLDdsSegmentedControlGroupElement>;
            "dds-sparkline": LocalJSX.IntrinsicElements["dds-sparkline"] & JSXBase.HTMLAttributes<HTMLDdsSparklineElement>;
            "dds-spinner": LocalJSX.IntrinsicElements["dds-spinner"] & JSXBase.HTMLAttributes<HTMLDdsSpinnerElement>;
            /**
             * A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning.
             */
            "dds-stack": LocalJSX.IntrinsicElements["dds-stack"] & JSXBase.HTMLAttributes<HTMLDdsStackElement>;
            "dds-switch": LocalJSX.IntrinsicElements["dds-switch"] & JSXBase.HTMLAttributes<HTMLDdsSwitchElement>;
            "dds-tab": LocalJSX.IntrinsicElements["dds-tab"] & JSXBase.HTMLAttributes<HTMLDdsTabElement>;
            "dds-tab-group": LocalJSX.IntrinsicElements["dds-tab-group"] & JSXBase.HTMLAttributes<HTMLDdsTabGroupElement>;
            /**
             * Body text for the interface, set in the design system's type scale: paragraphs, captions, supporting copy and inline emphasis.
             * `as` chooses the element, which gives the text its meaning and decides whether it sits on its own line or inside one. `size`, `weight` and `contrast` only change how it looks.
             * Use it for any text that needs design system styling, and a plain HTML element where it doesn't. For headings use `dds-heading`.
             */
            "dds-text": LocalJSX.IntrinsicElements["dds-text"] & JSXBase.HTMLAttributes<HTMLDdsTextElement>;
            "dds-text-field": LocalJSX.IntrinsicElements["dds-text-field"] & JSXBase.HTMLAttributes<HTMLDdsTextFieldElement>;
            /**
             * A tooltip is a short floating label that explains the element it is anchored to. It opens while a pointer is over the trigger or focus is inside it, and closes on `Esc`. It is a visual aid only: link the content to the trigger with `aria-describedby` so assistive technology announces it, and give a trigger that is not natively focusable `tabindex="0"`.
             */
            "dds-tooltip": LocalJSX.IntrinsicElements["dds-tooltip"] & JSXBase.HTMLAttributes<HTMLDdsTooltipElement>;
        }
    }
}