@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/types/components.d.ts

@@ -5,174 +5,672 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
 import { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 import { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
-import { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
-export { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
+import { DsTextInputEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
+import { Event } from "./stencil-public-runtime";
 export { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 export { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
-export { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
+export { DsTextInputEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
+export { Event } from "./stencil-public-runtime";
 export namespace Components {
     interface DsAccordion {
-        "accordionId": string;
-        "borderAligned": boolean;
-        "closeButtonLabel": string;
-        "headingLevel": number;
-        "hideTopBorder": boolean;
-        "openByDefault": boolean;
-        "useCloseButton": boolean;
-        "variant": 'default' | 'compact';
+        /**
+          * Id of the accordion button
+         */
+        "dsAccordionId": string;
+        /**
+          * Aligns the border to the position where accordion content starts
+         */
+        "dsBorderAligned": boolean;
+        /**
+          * Text of the close button
+         */
+        "dsCloseButtonLabel": string;
+        /**
+          * Heading level to be used for the accordion
+         */
+        "dsHeadingLevel": number;
+        /**
+          * Removes the bottom border
+         */
+        "dsHideBottomBorder": boolean;
+        /**
+          * Removes the top border
+         */
+        "dsHideTopBorder": boolean;
+        /**
+          * Displays the accordion as opened when loaded
+         */
+        "dsOpenByDefault": boolean;
+        /**
+          * Displays a close button at the end of an opened accordion
+         */
+        "dsUseCloseButton": boolean;
+        /**
+          * Variant of the accordion
+         */
+        "dsVariant": 'default' | 'compact';
     }
     interface DsButton {
-        "ariaDisabled": string;
-        "colour": 'blue' | 'black' | 'white';
-        "disabled": boolean;
-        "fontWeight": string;
-        "fullWidth": boolean;
-        "icon": string;
-        "iconPosition": 'start' | 'end';
-        "size": 'small' | 'medium';
-        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Passed to the `aria-disabled` attribute of the `button` element
+         */
+        "dsAriaDisabled": string;
+        /**
+          * Colour of the button
+         */
+        "dsColour": 'blue' | 'black' | 'white';
+        /**
+          * Passed to the `disabled` attribute of the `button` element
+         */
+        "dsDisabled": boolean;
+        /**
+          * Sets focus to the button element rendered inside `ds-button` component.
+         */
+        "dsFocus": () => Promise<void>;
+        /**
+          * Displays the button as full width
+         */
+        "dsFullWidth": boolean;
+        /**
+          * Icon to display alongside the button text
+         */
+        "dsIcon": string;
+        /**
+          * Whether to display the icon before or after the button text
+         */
+        "dsIconPosition": 'start' | 'end';
+        /**
+          * Displays a loading spinner in the button
+         */
+        "dsIsLoading": boolean;
+        /**
+          * Size of the button
+         */
+        "dsSize": 'small' | 'medium';
+        /**
+          * Information for screen readers when spinner is displayed
+         */
+        "dsSpinnerHiddenText": string;
+        /**
+          * Passed to the `type` attribute of the `button` element
+         */
+        "dsType": 'button' | 'submit' | 'reset';
+        /**
+          * Wraps the button in a container where `aria-live` is set to `polite`
+         */
+        "dsUseSpinner": boolean;
         /**
           * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
           * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
           * @see {@link https://stackoverflow.com/a/52445966}
           * @see {@link https://github.com/ionic-team/stencil/issues/399}
          */
-        "value": string;
-        "variant": 'primary' | 'secondary' | 'supplementary';
+        "dsValue": string;
+        /**
+          * Variant of the button
+         */
+        "dsVariant": 'primary' | 'secondary' | 'supplementary';
+    }
+    interface DsCard {
+        /**
+          * Optional description text
+         */
+        "dsDescription"?: string;
+        /**
+          * Optional eyebrow text displayed above the heading
+         */
+        "dsEyebrow"?: string;
+        /**
+          * The main heading text (required)
+         */
+        "dsHeading": string;
+        /**
+          * Heading level, defaults to 3
+         */
+        "dsHeadingLevel": number;
+        /**
+          * Optional image alt text
+         */
+        "dsImageAlt"?: string;
+        /**
+          * Optional image URL
+         */
+        "dsImageUrl"?: string;
+        /**
+          * Optional to show arrow when card is a link, defaults to true
+         */
+        "dsShowArrow"?: boolean;
+        /**
+          * Optional subtitle text displayed below the heading
+         */
+        "dsSubtitle"?: string;
+        /**
+          * Optional URL to use card as a link
+         */
+        "dsUrl"?: string;
+        /**
+          * Optional URL target, if URL should open to new window or not, default _blank
+         */
+        "dsUrlTarget": DsCardUrlTarget;
+        /**
+          * Variant of the card, filled or outlined, defaults to filled
+         */
+        "dsVariant": DsCardVariant;
     }
     interface DsCheckbox {
-        "ariaLabel": string;
-        "assistiveText"?: string;
-        "checked": boolean;
-        "disabled": boolean;
-        "errorText": string;
-        "errorsDisabled": boolean;
-        "identifier"?: string;
-        "indeterminate": boolean;
-        "legend"?: string;
-        "optional": boolean;
-        "optionalText"?: string;
-        "required": boolean;
-        "text"?: string;
+        /**
+          * Passed to the `aria-label` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsAriaLabel": string;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attriubte of the `input` element of the rendered checkbox.
+         */
+        "dsChecked": boolean;
+        /**
+          * Passed to the `disabled` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsDisabled": boolean;
+        /**
+          * Error message shown below the text input. If set, the checkbox is shown in an invalid state.
+         */
+        "dsErrorText": string;
+        /**
+          * Used internally in checkbox group to disable error messages for a single checkbox.
+         */
+        "dsErrorsDisabled": boolean;
+        /**
+          * Passed to the `id` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsId"?: string;
+        /**
+          * Mainly used in a nested checkbox group to display a parent checkbox in a partially selected state if some but not all of the nested checkbox group's checkboxes are selected.
+         */
+        "dsIndeterminate": boolean;
+        /**
+          * Label of the checkbox
+         */
+        "dsLegend"?: string;
+        /**
+          * Displays indicator that the checkbox is optional alongside label.
+         */
+        "dsOptional": boolean;
+        /**
+          * Text shown alongside label, if the checkbox is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Passed to the `required` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsRequired": boolean;
+        /**
+          * The text of the checkbox
+         */
+        "dsText"?: string;
     }
     interface DsCheckboxGroup {
-        "assistiveText"?: string;
-        "checked": boolean;
-        "direction": 'horizontal' | 'vertical';
-        "disabled": boolean;
-        "errorText": string;
-        "legend"?: string;
+        /**
+          * All checkboxes must be checked.
+         */
+        "dsAllRequired": boolean;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attribute of the `input` of parent checkbox element.
+         */
+        "dsChecked": boolean;
+        /**
+          * `vertical` displays checkboxes stacked `horizontal` displays checkboxes side by side
+         */
+        "dsDirection": 'horizontal' | 'vertical';
+        /**
+          * Disables all checkboxes in the checkbox group
+         */
+        "dsDisabled": boolean;
+        /**
+          * Error message shown below the checkbox group. If set, the checkbox group is shown in an invalid state.
+         */
+        "dsErrorText": string;
+        /**
+          * Label of the checkbox group
+         */
+        "dsLegend"?: string;
+        /**
+          * None of the checkboxes need to be checked.
+         */
+        "dsOptional": boolean;
+        /**
+          * Text shown alongside label, if the checkbox button group is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * One or more checkboxes must be checked.
+         */
+        "dsRequired": boolean;
+        /**
+          * If given, a parent checkbox with this text will be rendered above slotted checkboxes
+         */
+        "dsText": string;
         /**
           * Updates child elements' checked state.
           * @param newValue New checked state.
          */
         "setChecked": (newValue: boolean) => Promise<void>;
-        "text": string;
     }
     interface DsIcon {
-        "colour": string;
+        /**
+          * Color of the icon
+         */
+        "dsColour": string;
+        /**
+          * Passed to the `title` attribute of the `svg` element
+         */
+        "dsHidden": boolean;
+        /**
+          * Name of the icon to display
+         */
+        "dsName": string;
+        /**
+          * Passed to the `role` attribute of the `svg` element
+         */
+        "dsRole": string;
+        /**
+          * Size of the icon
+         */
+        "dsSize": Size;
+        /**
+          * Tooltip of the icon
+         */
         "dsTitle": string;
-        "hidden": boolean;
-        "name": string;
-        "role": string;
-        "size": string;
     }
     interface DsInputValidity {
-        "text": string;
-        "type": InputValidityType;
-        "validityRole"?: InputValidityRole;
+        /**
+          * Passed to the `aria-atomic` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsAriaAtomic"?: 'true' | 'false';
+        /**
+          * Passed to the `aria-live` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsAriaLive"?: 'assertive' | 'polite';
+        /**
+          * Text to display in the validity message
+         */
+        "dsText": string;
+        /**
+          * Type of the validity
+         */
+        "dsType": 'error' | 'success';
+        /**
+          * Passed to the `role` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsValidityRole"?: 'alert' | 'status';
     }
     interface DsLink {
-        "ariaLabel": string;
-        "download"?: boolean;
-        "href": string;
-        "icon": string;
-        "iconHidden"?: boolean;
-        "iconPosition": LinkIconPosition;
-        "iconTitle"?: string;
-        "language"?: LinkLang;
-        "size"?: LinkSize;
-        "target"?: LinkTarget;
-        "text": string;
-        "variant": LinkVariant;
-        "weight": LinkWeight;
+        /**
+          * Passed to the `aria-label` attribute of the `a` element
+         */
+        "dsAriaLabel": string;
+        /**
+          * Colour of the link. Overrides default colour.
+         */
+        "dsColour"?: 'black' | 'white';
+        /**
+          * Passed to the `download` attribute of the `a` element
+         */
+        "dsDownload"?: boolean;
+        /**
+          * Passed to the `href` attribute of the `a` element
+         */
+        "dsHref": string;
+        /**
+          * Icon to display alongside link
+         */
+        "dsIcon": string;
+        /**
+          * Passed to the `dsHidden` property of the `ds-icon` element
+         */
+        "dsIconHidden"?: boolean;
+        /**
+          * Whether to display the icon before or after the link
+         */
+        "dsIconPosition": LinkIconPosition;
+        /**
+          * Passed to the `dsTitle` property of the `ds-icon` element
+         */
+        "dsIconTitle"?: string;
+        /**
+          * Size of the link
+         */
+        "dsSize"?: LinkSize;
+        /**
+          * Passed to the `target` attribute of the `a` element
+         */
+        "dsTarget"?: LinkTarget;
+        /**
+          * Text content of the link
+         */
+        "dsText": string;
+        /**
+          * Variant of the link
+         */
+        "dsVariant": LinkVariant;
+        /**
+          * Font weight of the link
+         */
+        "dsWeight": LinkWeight;
     }
     interface DsLinkWithArrow {
-        "ariaLabel": string;
-        "href": string;
-        "iconPosition": LinkIconPosition;
-        "language"?: LinkLang;
-        "target"?: LinkTarget;
-        "text"?: string;
-    }
-    interface DsTextInput {
-        "actionButtonAriaLabel"?: string;
-        "ariaDescribedby"?: string;
-        "ariaLabel": string;
-        "ariaLabelledby"?: string;
-        "assistiveText"?: string;
-        "autocomplete"?: string;
-        "clearInput": () => Promise<void>;
-        "disabled"?: boolean;
-        "errorText"?: string;
-        "hiddenAssistiveText"?: string;
-        "icon": string;
-        "identifier"?: string;
-        "label"?: string;
-        "max"?: number;
-        "maxlength"?: number;
-        "min"?: number;
-        "name": string;
-        "optional"?: boolean;
-        "optionalText"?: string;
-        "pattern"?: string;
-        "placeholder"?: string;
-        "prefixText"?: string;
-        "readonly"?: boolean;
-        "required"?: boolean;
-        "successText"?: string;
-        "suffixText"?: string;
-        "togglePasswordVisibility": () => Promise<boolean>;
-        "type": DsTextInputType;
-        "value"?: string;
-    }
-    interface DsVisuallyHidden {
+        /**
+          * Passed to the `aria-label` attribute of the `a` element
+         */
+        "dsAriaLabel": string;
+        /**
+          * Passed to the `href` attribute of the `a` element
+         */
+        "dsHref": string;
+        /**
+          * Whether to display the arrow icon before or after the link
+         */
+        "dsIconPosition": LinkIconPosition;
+        /**
+          * Passed to the `target` attribute of the `a` element
+         */
+        "dsTarget"?: LinkTarget;
+        /**
+          * Text content of the link
+         */
+        "dsText"?: string;
     }
-}
-export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsCheckboxElement;
-}
-export interface DsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsCheckboxGroupElement;
-}
-export interface DsTextInputCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsTextInputElement;
-}
-declare global {
-    interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
+    interface DsRadioButton {
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attribute of the `input` element of the rendered radio button.
+         */
+        "dsChecked": boolean;
+        /**
+          * Passed to the `disabled` attribute of the `input` element of the rendered radio button.
+         */
+        "dsDisabled": boolean;
+        /**
+          * Error message shown below the radio button. If set, the radio button is shown in an invalid state.
+         */
+        "dsErrorText": string;
+        /**
+          * Can be used to disable client-side validation. Used internally in radio button group to disable error messages for a single radio button.
+         */
+        "dsErrorsDisabled": boolean;
+        /**
+          * Custom focus method that ensures the correct internal input element is focused
+         */
+        "dsFocus": () => Promise<void>;
+        /**
+          * Passed to the `id` attriubte of the `input` element of the rendered radio button.
+         */
+        "dsId"?: string;
+        /**
+          * Label of the radio button
+         */
+        "dsLegend"?: string;
+        /**
+          * Passed to the `required` attribute of the `input` element of the rendered radio button.
+         */
+        "dsRequired": boolean;
+        /**
+          * The text of the radio button
+         */
+        "dsText"?: string;
+        /**
+          * Passed to the `value` attribute of the `input` element of the rendered radio button.
+         */
+        "dsValue"?: string;
+        "setChecked": () => Promise<void>;
+        /**
+          * Whether the radio button is focusable via tab or not. Used internally inside a radio button group to make keyboard usage work as expected.  NOTE: manually calling this method may cause unexpected behaviour
+         */
+        "setFocusable": (flag: boolean) => Promise<void>;
     }
-    var HTMLDsAccordionElement: {
-        prototype: HTMLDsAccordionElement;
-        new (): HTMLDsAccordionElement;
-    };
-    interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
+    interface DsRadioButtonGroup {
+        /**
+          * Text for additional information shown below legend
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * `vertical` displays radio buttons stacked `horizontal` displays radio buttons side by side
+         */
+        "dsDirection": 'horizontal' | 'vertical';
+        /**
+          * Error message shown below the text input. If set, the text input is shown in an invalid state.
+         */
+        "dsErrorText": string;
+        /**
+          * Label for the radio button group
+         */
+        "dsLegend"?: string;
+        /**
+          * One or more radio buttons must be checked.
+         */
+        "dsRequired": boolean;
+        /**
+          * Determines which radio button in the group is selected. The radio button with the matching `value` will be selected.
+         */
+        "dsValue"?: string;
+        "getValue": () => Promise<string>;
     }
-    var HTMLDsButtonElement: {
-        prototype: HTMLDsButtonElement;
-        new (): HTMLDsButtonElement;
-    };
-    interface HTMLDsCheckboxElementEventMap {
-        "dsCheckboxInput": DsCheckboxInputEvent;
+    interface DsSpinner {
+        /**
+          * Visually hidden information for screen readers
+         */
+        "dsHiddenAssistiveText": string;
+        /**
+          * Size of the spinner
+         */
+        "dsSize": SpinnerSize;
+        /**
+          * Color of the spinner
+         */
+        "dsSpinnerColor": SpinnerColor;
+        /**
+          * Where to display the `dsText` property
+         */
+        "dsSpinnerTextPosition": SpinnerTextPosition;
+        /**
+          * Text to display alongside spinner
+         */
+        "dsText": string;
+        /**
+          * Sets `aria-live="polite"` attribute to the spinner element
+         */
+        "dsUseAriaLive": boolean;
+        /**
+          * Sets `role="alert"` attribute to the spinner element
+         */
+        "dsUseRoleAlert": boolean;
     }
-    interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    interface DsTextInput {
+        "clearInput": (e: Event) => Promise<void>;
+        /**
+          * Aria-label for action button for text inputs with type `password` or `search`. The action button for `search` text input is the clear button. The action button for `password` text input is the toggle visibility button.
+         */
+        "dsActionButtonAriaLabel"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the `input` element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Passed to the `aria-label` attribute of the `input` element.
+         */
+        "dsAriaLabel": string;
+        /**
+          * Passed to the `aria-labelledby` attribute of the `input` element.
+         */
+        "dsAriaLabelledby"?: string;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `autocomplete` attribute of the `input` element.
+         */
+        "dsAutocomplete"?: string;
+        /**
+          * Passed to the `disabled` attribute of the `input` element.
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Error message shown below the text input. If set, the text input is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Visually hidden additional information for screen readers
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Icon to display at the start of the text input.
+         */
+        "dsIcon": string;
+        /**
+          * Passed to the `id` of the `input` element.
+         */
+        "dsId"?: string;
+        /**
+          * Label of the input
+         */
+        "dsLabel"?: string;
+        /**
+          * Passed to the `max` attribute of the `input` element.
+         */
+        "dsMax"?: number;
+        /**
+          * Passed to the `maxlength` attribute of the `input` element.
+         */
+        "dsMaxLength"?: number;
+        /**
+          * Passed to the `min` attribute of the `input` element.
+         */
+        "dsMin"?: number;
+        /**
+          * Passed to the `name` attribute of the `input` element.
+         */
+        "dsName": string;
+        /**
+          * Displays indicator that the text input is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the text input is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Passed to the `pattern` attribute of the `input` element.
+         */
+        "dsPattern"?: string;
+        /**
+          * Passed to the `placeholder` of the `input` element.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes).
+         */
+        "dsPrefixText"?: string;
+        /**
+          * Passed to the `readonly` attribute of the `input` element.
+         */
+        "dsReadonly"?: boolean;
+        /**
+          * Passed to the `required` attribute of the `input` element.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * Success message shown below the text input. If set, the text input is shown in a success state.
+         */
+        "dsSuccessText"?: string;
+        /**
+          * Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes).
+         */
+        "dsSuffixText"?: string;
+        /**
+          * Type of the text input, passed to the `type` attribute of the `input` element. A text input of type `search` has an action button to clear the input value if it is not empty. A text input of type `password` has an action button to toggle the visibility of the entered input.
+         */
+        "dsType": DsTextInputType;
+        /**
+          * Passed to the `value` attribute of the `input` element.
+         */
+        "dsValue"?: string;
+        "togglePasswordVisibility": () => Promise<boolean>;
+    }
+    interface DsVisuallyHidden {
+    }
+}
+export interface DsAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsAccordionElement;
+}
+export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCheckboxElement;
+}
+export interface DsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCheckboxGroupElement;
+}
+export interface DsRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsRadioButtonElement;
+}
+export interface DsRadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsRadioButtonGroupElement;
+}
+export interface DsTextInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTextInputElement;
+}
+declare global {
+    interface HTMLDsAccordionElementEventMap {
+        "dsToggle": boolean;
+    }
+    interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsAccordionElementEventMap>(type: K, listener: (this: HTMLDsAccordionElement, ev: DsAccordionCustomEvent<HTMLDsAccordionElementEventMap[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 HTMLDsAccordionElementEventMap>(type: K, listener: (this: HTMLDsAccordionElement, ev: DsAccordionCustomEvent<HTMLDsAccordionElementEventMap[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 HTMLDsAccordionElement: {
+        prototype: HTMLDsAccordionElement;
+        new (): HTMLDsAccordionElement;
+    };
+    interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
+    }
+    var HTMLDsButtonElement: {
+        prototype: HTMLDsButtonElement;
+        new (): HTMLDsButtonElement;
+    };
+    interface HTMLDsCardElement extends Components.DsCard, HTMLStencilElement {
+    }
+    var HTMLDsCardElement: {
+        prototype: HTMLDsCardElement;
+        new (): HTMLDsCardElement;
+    };
+    interface HTMLDsCheckboxElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[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 HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
@@ -187,6 +685,7 @@ declare global {
     interface HTMLDsCheckboxGroupElementEventMap {
         "dsCheckboxGroupChange": DsCheckboxGroupChangeEvent;
         "dsCheckboxGroupIndeterminateChildChange": DsCheckboxGroupIndeterminateChildChangeEvent;
+        "dsCheckboxGroupInvalidStateChange": boolean;
     }
     interface HTMLDsCheckboxGroupElement extends Components.DsCheckboxGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDsCheckboxGroupElement, ev: DsCheckboxGroupCustomEvent<HTMLDsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -226,8 +725,53 @@ declare global {
         prototype: HTMLDsLinkWithArrowElement;
         new (): HTMLDsLinkWithArrowElement;
     };
+    interface HTMLDsRadioButtonElementEventMap {
+        "dsChange": boolean;
+        "dsRadioButtonChecked": void;
+    }
+    interface HTMLDsRadioButtonElement extends Components.DsRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsRadioButtonElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonElement, ev: DsRadioButtonCustomEvent<HTMLDsRadioButtonElementEventMap[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 HTMLDsRadioButtonElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonElement, ev: DsRadioButtonCustomEvent<HTMLDsRadioButtonElementEventMap[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 HTMLDsRadioButtonElement: {
+        prototype: HTMLDsRadioButtonElement;
+        new (): HTMLDsRadioButtonElement;
+    };
+    interface HTMLDsRadioButtonGroupElementEventMap {
+        "dsRadioGroupValueChange": string | undefined;
+        "dsRadioGroupInvalidStateChange": boolean;
+        "dsChange": string;
+    }
+    interface HTMLDsRadioButtonGroupElement extends Components.DsRadioButtonGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonGroupElement, ev: DsRadioButtonGroupCustomEvent<HTMLDsRadioButtonGroupElementEventMap[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 HTMLDsRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonGroupElement, ev: DsRadioButtonGroupCustomEvent<HTMLDsRadioButtonGroupElementEventMap[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 HTMLDsRadioButtonGroupElement: {
+        prototype: HTMLDsRadioButtonGroupElement;
+        new (): HTMLDsRadioButtonGroupElement;
+    };
+    interface HTMLDsSpinnerElement extends Components.DsSpinner, HTMLStencilElement {
+    }
+    var HTMLDsSpinnerElement: {
+        prototype: HTMLDsSpinnerElement;
+        new (): HTMLDsSpinnerElement;
+    };
     interface HTMLDsTextInputElementEventMap {
-        "clear": DsTextInputClearEvent;
+        "dsChange": Omit<DsTextInputEvent, 'event'>;
+        "dsInput": DsTextInputEvent<InputEvent>;
+        "dsClear": DsTextInputEvent;
     }
     interface HTMLDsTextInputElement extends Components.DsTextInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsTextInputElementEventMap>(type: K, listener: (this: HTMLDsTextInputElement, ev: DsTextInputCustomEvent<HTMLDsTextInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -252,150 +796,661 @@ declare global {
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
         "ds-button": HTMLDsButtonElement;
+        "ds-card": HTMLDsCardElement;
         "ds-checkbox": HTMLDsCheckboxElement;
         "ds-checkbox-group": HTMLDsCheckboxGroupElement;
         "ds-icon": HTMLDsIconElement;
         "ds-input-validity": HTMLDsInputValidityElement;
         "ds-link": HTMLDsLinkElement;
         "ds-link-with-arrow": HTMLDsLinkWithArrowElement;
+        "ds-radio-button": HTMLDsRadioButtonElement;
+        "ds-radio-button-group": HTMLDsRadioButtonGroupElement;
+        "ds-spinner": HTMLDsSpinnerElement;
         "ds-text-input": HTMLDsTextInputElement;
         "ds-visually-hidden": HTMLDsVisuallyHiddenElement;
     }
 }
 declare namespace LocalJSX {
     interface DsAccordion {
-        "accordionId"?: string;
-        "borderAligned"?: boolean;
-        "closeButtonLabel"?: string;
-        "headingLevel"?: number;
-        "hideTopBorder"?: boolean;
-        "openByDefault"?: boolean;
-        "useCloseButton"?: boolean;
-        "variant"?: 'default' | 'compact';
+        /**
+          * Id of the accordion button
+         */
+        "dsAccordionId"?: string;
+        /**
+          * Aligns the border to the position where accordion content starts
+         */
+        "dsBorderAligned"?: boolean;
+        /**
+          * Text of the close button
+         */
+        "dsCloseButtonLabel"?: string;
+        /**
+          * Heading level to be used for the accordion
+         */
+        "dsHeadingLevel"?: number;
+        /**
+          * Removes the bottom border
+         */
+        "dsHideBottomBorder"?: boolean;
+        /**
+          * Removes the top border
+         */
+        "dsHideTopBorder"?: boolean;
+        /**
+          * Displays the accordion as opened when loaded
+         */
+        "dsOpenByDefault"?: boolean;
+        /**
+          * Displays a close button at the end of an opened accordion
+         */
+        "dsUseCloseButton"?: boolean;
+        /**
+          * Variant of the accordion
+         */
+        "dsVariant"?: 'default' | 'compact';
+        /**
+          * Emitted when the accordion is expanded or closed.
+         */
+        "onDsToggle"?: (event: DsAccordionCustomEvent<boolean>) => void;
     }
     interface DsButton {
-        "ariaDisabled"?: string;
-        "colour"?: 'blue' | 'black' | 'white';
-        "disabled"?: boolean;
-        "fontWeight"?: string;
-        "fullWidth"?: boolean;
-        "icon"?: string;
-        "iconPosition"?: 'start' | 'end';
-        "size"?: 'small' | 'medium';
-        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Passed to the `aria-disabled` attribute of the `button` element
+         */
+        "dsAriaDisabled"?: string;
+        /**
+          * Colour of the button
+         */
+        "dsColour"?: 'blue' | 'black' | 'white';
+        /**
+          * Passed to the `disabled` attribute of the `button` element
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Displays the button as full width
+         */
+        "dsFullWidth"?: boolean;
+        /**
+          * Icon to display alongside the button text
+         */
+        "dsIcon"?: string;
+        /**
+          * Whether to display the icon before or after the button text
+         */
+        "dsIconPosition"?: 'start' | 'end';
+        /**
+          * Displays a loading spinner in the button
+         */
+        "dsIsLoading"?: boolean;
+        /**
+          * Size of the button
+         */
+        "dsSize"?: 'small' | 'medium';
+        /**
+          * Information for screen readers when spinner is displayed
+         */
+        "dsSpinnerHiddenText"?: string;
+        /**
+          * Passed to the `type` attribute of the `button` element
+         */
+        "dsType"?: 'button' | 'submit' | 'reset';
+        /**
+          * Wraps the button in a container where `aria-live` is set to `polite`
+         */
+        "dsUseSpinner"?: boolean;
         /**
           * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
           * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
           * @see {@link https://stackoverflow.com/a/52445966}
           * @see {@link https://github.com/ionic-team/stencil/issues/399}
          */
-        "value"?: string;
-        "variant"?: 'primary' | 'secondary' | 'supplementary';
+        "dsValue"?: string;
+        /**
+          * Variant of the button
+         */
+        "dsVariant"?: 'primary' | 'secondary' | 'supplementary';
+    }
+    interface DsCard {
+        /**
+          * Optional description text
+         */
+        "dsDescription"?: string;
+        /**
+          * Optional eyebrow text displayed above the heading
+         */
+        "dsEyebrow"?: string;
+        /**
+          * The main heading text (required)
+         */
+        "dsHeading": string;
+        /**
+          * Heading level, defaults to 3
+         */
+        "dsHeadingLevel"?: number;
+        /**
+          * Optional image alt text
+         */
+        "dsImageAlt"?: string;
+        /**
+          * Optional image URL
+         */
+        "dsImageUrl"?: string;
+        /**
+          * Optional to show arrow when card is a link, defaults to true
+         */
+        "dsShowArrow"?: boolean;
+        /**
+          * Optional subtitle text displayed below the heading
+         */
+        "dsSubtitle"?: string;
+        /**
+          * Optional URL to use card as a link
+         */
+        "dsUrl"?: string;
+        /**
+          * Optional URL target, if URL should open to new window or not, default _blank
+         */
+        "dsUrlTarget"?: DsCardUrlTarget;
+        /**
+          * Variant of the card, filled or outlined, defaults to filled
+         */
+        "dsVariant"?: DsCardVariant;
     }
     interface DsCheckbox {
-        "ariaLabel"?: string;
-        "assistiveText"?: string;
-        "checked"?: boolean;
-        "disabled"?: boolean;
-        "errorText"?: string;
-        "errorsDisabled"?: boolean;
-        "identifier"?: string;
-        "indeterminate"?: boolean;
-        "legend"?: string;
-        "onDsCheckboxInput"?: (event: DsCheckboxCustomEvent<DsCheckboxInputEvent>) => void;
-        "optional"?: boolean;
-        "optionalText"?: string;
-        "required"?: boolean;
-        "text"?: string;
+        /**
+          * Passed to the `aria-label` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attriubte of the `input` element of the rendered checkbox.
+         */
+        "dsChecked"?: boolean;
+        /**
+          * Passed to the `disabled` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Error message shown below the text input. If set, the checkbox is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Used internally in checkbox group to disable error messages for a single checkbox.
+         */
+        "dsErrorsDisabled"?: boolean;
+        /**
+          * Passed to the `id` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsId"?: string;
+        /**
+          * Mainly used in a nested checkbox group to display a parent checkbox in a partially selected state if some but not all of the nested checkbox group's checkboxes are selected.
+         */
+        "dsIndeterminate"?: boolean;
+        /**
+          * Label of the checkbox
+         */
+        "dsLegend"?: string;
+        /**
+          * Displays indicator that the checkbox is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the checkbox is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Passed to the `required` attribute of the `input` element of the rendered checkbox.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * The text of the checkbox
+         */
+        "dsText"?: string;
+        /**
+          * The `dsChange` event is fired each time the `value` property of the `ds-checkbox` element is changed.
+         */
+        "onDsChange"?: (event: DsCheckboxCustomEvent<boolean>) => void;
     }
     interface DsCheckboxGroup {
-        "assistiveText"?: string;
-        "checked"?: boolean;
-        "direction"?: 'horizontal' | 'vertical';
-        "disabled"?: boolean;
-        "errorText"?: string;
-        "legend"?: string;
+        /**
+          * All checkboxes must be checked.
+         */
+        "dsAllRequired"?: boolean;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attribute of the `input` of parent checkbox element.
+         */
+        "dsChecked"?: boolean;
+        /**
+          * `vertical` displays checkboxes stacked `horizontal` displays checkboxes side by side
+         */
+        "dsDirection"?: 'horizontal' | 'vertical';
+        /**
+          * Disables all checkboxes in the checkbox group
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Error message shown below the checkbox group. If set, the checkbox group is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Label of the checkbox group
+         */
+        "dsLegend"?: string;
+        /**
+          * None of the checkboxes need to be checked.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the checkbox button group is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * One or more checkboxes must be checked.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * If given, a parent checkbox with this text will be rendered above slotted checkboxes
+         */
+        "dsText"?: string;
+        /**
+          * `dsCheckboxGroupChange` event is emitted when the `checked` state of a checkbox rendered inside the group changes. This is used internally to synchronize the state of checkbox groups.
+         */
         "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupChangeEvent>) => void;
+        /**
+          * `dsCheckboxGroupIndeterminateChildChange` event is emitted when the `indeterminate` state of a nested checkbox group is changed. This is used internally to synchronize the state of checkbox groups.
+         */
         "onDsCheckboxGroupIndeterminateChildChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupIndeterminateChildChangeEvent>) => void;
-        "text"?: string;
+        /**
+          * The `dsCheckboxGroupInvalidStateChange` event is emitted when the `dsErrorText` property changes. The event `detail` will be `false` if the `dsErrorText` is empty, otherwise `true`. This event is mainly used internallty to synchronize the invalid state of checkboxes.
+         */
+        "onDsCheckboxGroupInvalidStateChange"?: (event: DsCheckboxGroupCustomEvent<boolean>) => void;
     }
     interface DsIcon {
-        "colour"?: string;
+        /**
+          * Color of the icon
+         */
+        "dsColour"?: string;
+        /**
+          * Passed to the `title` attribute of the `svg` element
+         */
+        "dsHidden"?: boolean;
+        /**
+          * Name of the icon to display
+         */
+        "dsName"?: string;
+        /**
+          * Passed to the `role` attribute of the `svg` element
+         */
+        "dsRole"?: string;
+        /**
+          * Size of the icon
+         */
+        "dsSize"?: Size;
+        /**
+          * Tooltip of the icon
+         */
         "dsTitle"?: string;
-        "hidden"?: boolean;
-        "name"?: string;
-        "role"?: string;
-        "size"?: string;
     }
     interface DsInputValidity {
-        "text"?: string;
-        "type"?: InputValidityType;
-        "validityRole"?: InputValidityRole;
+        /**
+          * Passed to the `aria-atomic` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsAriaAtomic"?: 'true' | 'false';
+        /**
+          * Passed to the `aria-live` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsAriaLive"?: 'assertive' | 'polite';
+        /**
+          * Text to display in the validity message
+         */
+        "dsText"?: string;
+        /**
+          * Type of the validity
+         */
+        "dsType"?: 'error' | 'success';
+        /**
+          * Passed to the `role` attribute of the container `div` element. Disabled if client-side validation is not used.
+         */
+        "dsValidityRole"?: 'alert' | 'status';
     }
     interface DsLink {
-        "ariaLabel"?: string;
-        "download"?: boolean;
-        "href": string;
-        "icon"?: string;
-        "iconHidden"?: boolean;
-        "iconPosition"?: LinkIconPosition;
-        "iconTitle"?: string;
-        "language"?: LinkLang;
-        "size"?: LinkSize;
-        "target"?: LinkTarget;
-        "text": string;
-        "variant"?: LinkVariant;
-        "weight"?: LinkWeight;
+        /**
+          * Passed to the `aria-label` attribute of the `a` element
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Colour of the link. Overrides default colour.
+         */
+        "dsColour"?: 'black' | 'white';
+        /**
+          * Passed to the `download` attribute of the `a` element
+         */
+        "dsDownload"?: boolean;
+        /**
+          * Passed to the `href` attribute of the `a` element
+         */
+        "dsHref": string;
+        /**
+          * Icon to display alongside link
+         */
+        "dsIcon"?: string;
+        /**
+          * Passed to the `dsHidden` property of the `ds-icon` element
+         */
+        "dsIconHidden"?: boolean;
+        /**
+          * Whether to display the icon before or after the link
+         */
+        "dsIconPosition"?: LinkIconPosition;
+        /**
+          * Passed to the `dsTitle` property of the `ds-icon` element
+         */
+        "dsIconTitle"?: string;
+        /**
+          * Size of the link
+         */
+        "dsSize"?: LinkSize;
+        /**
+          * Passed to the `target` attribute of the `a` element
+         */
+        "dsTarget"?: LinkTarget;
+        /**
+          * Text content of the link
+         */
+        "dsText": string;
+        /**
+          * Variant of the link
+         */
+        "dsVariant"?: LinkVariant;
+        /**
+          * Font weight of the link
+         */
+        "dsWeight"?: LinkWeight;
     }
     interface DsLinkWithArrow {
-        "ariaLabel"?: string;
-        "href": string;
-        "iconPosition"?: LinkIconPosition;
-        "language"?: LinkLang;
-        "target"?: LinkTarget;
-        "text"?: string;
+        /**
+          * Passed to the `aria-label` attribute of the `a` element
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Passed to the `href` attribute of the `a` element
+         */
+        "dsHref": string;
+        /**
+          * Whether to display the arrow icon before or after the link
+         */
+        "dsIconPosition"?: LinkIconPosition;
+        /**
+          * Passed to the `target` attribute of the `a` element
+         */
+        "dsTarget"?: LinkTarget;
+        /**
+          * Text content of the link
+         */
+        "dsText"?: string;
+    }
+    interface DsRadioButton {
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `checked` attribute of the `input` element of the rendered radio button.
+         */
+        "dsChecked"?: boolean;
+        /**
+          * Passed to the `disabled` attribute of the `input` element of the rendered radio button.
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Error message shown below the radio button. If set, the radio button is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Can be used to disable client-side validation. Used internally in radio button group to disable error messages for a single radio button.
+         */
+        "dsErrorsDisabled"?: boolean;
+        /**
+          * Passed to the `id` attriubte of the `input` element of the rendered radio button.
+         */
+        "dsId"?: string;
+        /**
+          * Label of the radio button
+         */
+        "dsLegend"?: string;
+        /**
+          * Passed to the `required` attribute of the `input` element of the rendered radio button.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * The text of the radio button
+         */
+        "dsText"?: string;
+        /**
+          * Passed to the `value` attribute of the `input` element of the rendered radio button.
+         */
+        "dsValue"?: string;
+        /**
+          * Event emitted when the `dsChecked` state changes.
+         */
+        "onDsChange"?: (event: DsRadioButtonCustomEvent<boolean>) => void;
+        /**
+          * Event emitted when the radio button is set to checked state. Used to notify a parent radio button group of a state change.
+         */
+        "onDsRadioButtonChecked"?: (event: DsRadioButtonCustomEvent<void>) => void;
+    }
+    interface DsRadioButtonGroup {
+        /**
+          * Text for additional information shown below legend
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * `vertical` displays radio buttons stacked `horizontal` displays radio buttons side by side
+         */
+        "dsDirection"?: 'horizontal' | 'vertical';
+        /**
+          * Error message shown below the text input. If set, the text input is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Label for the radio button group
+         */
+        "dsLegend"?: string;
+        /**
+          * One or more radio buttons must be checked.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * Determines which radio button in the group is selected. The radio button with the matching `value` will be selected.
+         */
+        "dsValue"?: string;
+        /**
+          * The `dsChange` event is emitted each time the `dsValue` of the radio button group is changed.
+         */
+        "onDsChange"?: (event: DsRadioButtonGroupCustomEvent<string>) => void;
+        /**
+          * The `dsRadioGroupInvalidStateChange` event is emitted when the `dsErrorText` property changes. The event `detail` will be `false` if the `dsErrorText` is empty, otherwise `true`. This event is mainly used internallty to synchronize the invalid state of radio buttons.
+         */
+        "onDsRadioGroupInvalidStateChange"?: (event: DsRadioButtonGroupCustomEvent<boolean>) => void;
+        /**
+          * The `dsRadioGroupValueChange` event is emitted when a radio button inside the radio button group is selected. This event is mainly used internally to synchronize the state of radio buttons.
+         */
+        "onDsRadioGroupValueChange"?: (event: DsRadioButtonGroupCustomEvent<string | undefined>) => void;
+    }
+    interface DsSpinner {
+        /**
+          * Visually hidden information for screen readers
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Size of the spinner
+         */
+        "dsSize"?: SpinnerSize;
+        /**
+          * Color of the spinner
+         */
+        "dsSpinnerColor"?: SpinnerColor;
+        /**
+          * Where to display the `dsText` property
+         */
+        "dsSpinnerTextPosition"?: SpinnerTextPosition;
+        /**
+          * Text to display alongside spinner
+         */
+        "dsText"?: string;
+        /**
+          * Sets `aria-live="polite"` attribute to the spinner element
+         */
+        "dsUseAriaLive"?: boolean;
+        /**
+          * Sets `role="alert"` attribute to the spinner element
+         */
+        "dsUseRoleAlert"?: boolean;
     }
     interface DsTextInput {
-        "actionButtonAriaLabel"?: string;
-        "ariaDescribedby"?: string;
-        "ariaLabel"?: string;
-        "ariaLabelledby"?: string;
-        "assistiveText"?: string;
-        "autocomplete"?: string;
-        "disabled"?: boolean;
-        "errorText"?: string;
-        "hiddenAssistiveText"?: string;
-        "icon"?: string;
-        "identifier"?: string;
-        "label"?: string;
-        "max"?: number;
-        "maxlength"?: number;
-        "min"?: number;
-        "name"?: string;
-        "onClear"?: (event: DsTextInputCustomEvent<DsTextInputClearEvent>) => void;
-        "optional"?: boolean;
-        "optionalText"?: string;
-        "pattern"?: string;
-        "placeholder"?: string;
-        "prefixText"?: string;
-        "readonly"?: boolean;
-        "required"?: boolean;
-        "successText"?: string;
-        "suffixText"?: string;
-        "type"?: DsTextInputType;
-        "value"?: string;
+        /**
+          * Aria-label for action button for text inputs with type `password` or `search`. The action button for `search` text input is the clear button. The action button for `password` text input is the toggle visibility button.
+         */
+        "dsActionButtonAriaLabel"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the `input` element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Passed to the `aria-label` attribute of the `input` element.
+         */
+        "dsAriaLabel"?: string;
+        /**
+          * Passed to the `aria-labelledby` attribute of the `input` element.
+         */
+        "dsAriaLabelledby"?: string;
+        /**
+          * Text for additional information shown below label
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Passed to the `autocomplete` attribute of the `input` element.
+         */
+        "dsAutocomplete"?: string;
+        /**
+          * Passed to the `disabled` attribute of the `input` element.
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Error message shown below the text input. If set, the text input is shown in an invalid state.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Visually hidden additional information for screen readers
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Icon to display at the start of the text input.
+         */
+        "dsIcon"?: string;
+        /**
+          * Passed to the `id` of the `input` element.
+         */
+        "dsId"?: string;
+        /**
+          * Label of the input
+         */
+        "dsLabel"?: string;
+        /**
+          * Passed to the `max` attribute of the `input` element.
+         */
+        "dsMax"?: number;
+        /**
+          * Passed to the `maxlength` attribute of the `input` element.
+         */
+        "dsMaxLength"?: number;
+        /**
+          * Passed to the `min` attribute of the `input` element.
+         */
+        "dsMin"?: number;
+        /**
+          * Passed to the `name` attribute of the `input` element.
+         */
+        "dsName"?: string;
+        /**
+          * Displays indicator that the text input is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the text input is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Passed to the `pattern` attribute of the `input` element.
+         */
+        "dsPattern"?: string;
+        /**
+          * Passed to the `placeholder` of the `input` element.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes).
+         */
+        "dsPrefixText"?: string;
+        /**
+          * Passed to the `readonly` attribute of the `input` element.
+         */
+        "dsReadonly"?: boolean;
+        /**
+          * Passed to the `required` attribute of the `input` element.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * Success message shown below the text input. If set, the text input is shown in a success state.
+         */
+        "dsSuccessText"?: string;
+        /**
+          * Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes).
+         */
+        "dsSuffixText"?: string;
+        /**
+          * Type of the text input, passed to the `type` attribute of the `input` element. A text input of type `search` has an action button to clear the input value if it is not empty. A text input of type `password` has an action button to toggle the visibility of the entered input.
+         */
+        "dsType"?: DsTextInputType;
+        /**
+          * Passed to the `value` attribute of the `input` element.
+         */
+        "dsValue"?: string;
+        /**
+          * The `dsChange` event is fired each time the `value` property of the `ds-text-input` element is changed. This may be a side effect of other events such as `dsClear` or `dsInput` event, or when the `value` property is programmatically changed.
+         */
+        "onDsChange"?: (event: DsTextInputCustomEvent<Omit<DsTextInputEvent, 'event'>>) => void;
+        /**
+          * The `dsClear` event is fired when the clear button of a input of type `search` is pressed.
+         */
+        "onDsClear"?: (event: DsTextInputCustomEvent<DsTextInputEvent>) => void;
+        /**
+          * The `dsInput` event is fired when the user modifies the input's value. The event is fired on each keystroke.
+         */
+        "onDsInput"?: (event: DsTextInputCustomEvent<DsTextInputEvent<InputEvent>>) => void;
     }
     interface DsVisuallyHidden {
     }
     interface IntrinsicElements {
         "ds-accordion": DsAccordion;
         "ds-button": DsButton;
+        "ds-card": DsCard;
         "ds-checkbox": DsCheckbox;
         "ds-checkbox-group": DsCheckboxGroup;
         "ds-icon": DsIcon;
         "ds-input-validity": DsInputValidity;
         "ds-link": DsLink;
         "ds-link-with-arrow": DsLinkWithArrow;
+        "ds-radio-button": DsRadioButton;
+        "ds-radio-button-group": DsRadioButtonGroup;
+        "ds-spinner": DsSpinner;
         "ds-text-input": DsTextInput;
         "ds-visually-hidden": DsVisuallyHidden;
     }
@@ -406,12 +1461,16 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
             "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
+            "ds-card": LocalJSX.DsCard & JSXBase.HTMLAttributes<HTMLDsCardElement>;
             "ds-checkbox": LocalJSX.DsCheckbox & JSXBase.HTMLAttributes<HTMLDsCheckboxElement>;
             "ds-checkbox-group": LocalJSX.DsCheckboxGroup & JSXBase.HTMLAttributes<HTMLDsCheckboxGroupElement>;
             "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
             "ds-input-validity": LocalJSX.DsInputValidity & JSXBase.HTMLAttributes<HTMLDsInputValidityElement>;
             "ds-link": LocalJSX.DsLink & JSXBase.HTMLAttributes<HTMLDsLinkElement>;
             "ds-link-with-arrow": LocalJSX.DsLinkWithArrow & JSXBase.HTMLAttributes<HTMLDsLinkWithArrowElement>;
+            "ds-radio-button": LocalJSX.DsRadioButton & JSXBase.HTMLAttributes<HTMLDsRadioButtonElement>;
+            "ds-radio-button-group": LocalJSX.DsRadioButtonGroup & JSXBase.HTMLAttributes<HTMLDsRadioButtonGroupElement>;
+            "ds-spinner": LocalJSX.DsSpinner & JSXBase.HTMLAttributes<HTMLDsSpinnerElement>;
             "ds-text-input": LocalJSX.DsTextInput & JSXBase.HTMLAttributes<HTMLDsTextInputElement>;
             "ds-visually-hidden": LocalJSX.DsVisuallyHidden & JSXBase.HTMLAttributes<HTMLDsVisuallyHiddenElement>;
         }