@uh-design-system/component-library 1.4.0 → 1.5.0-rc.0

package/dist/types/components.d.ts

@@ -9,16 +9,14 @@ import { DsAccordionToggleEvent } from "./components/01-base-components/ds-accor
 import { DsActionListItemSelectEvent, DsActionListItemVariant } from "./components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item";
 import { DsActionMenuCloseEvent, DsActionMenuOpenEvent } from "./components/01-base-components/ds-action-menu/ds-action-menu";
 import { DsBackdropTransitionEvent } from "./components/01-base-components/ds-backdrop/ds-backdrop";
-import { LinkTarget } from "./components/utils/link/linkUtils";
 import { DsCheckboxBlurEvent, DsCheckboxChangeEvent, DsCheckboxFocusEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
 import { DsSubmitInvalidEvent, DsValidityEvent } from "./utils/controls/controlUtils";
-import { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent, DsCheckboxGroupInvalidStateChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
+import { DsCheckboxGroupAllRequiredChangeEvent, DsCheckboxGroupChangeEvent, DsCheckboxGroupCheckedChangeEvent, DsCheckboxGroupDisabledChangeEvent, DsCheckboxGroupFormChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent, DsCheckboxGroupInvalidStateChangeEvent, DsCheckboxGroupNameChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 import { DsChipClickEvent, DsChipValue } from "./components/01-base-components/ds-chip/ds-chip";
 import { DsChipClickEvent as DsChipClickEvent1 } from "./components/01-base-components/ds-chip/ds-chip";
-import { DsSubmitInvalidEvent as DsSubmitInvalidEvent1, DsValidityEvent as DsValidityEvent1 } from ".";
 import { DsComboboxBlurEvent, DsComboboxChangeEvent, DsComboboxFilterChangeEvent, DsComboboxFocusEvent, DsComboboxMultipleChangeEvent, DsComboboxSelectedOptionRemovedEvent, DsComboboxSelectedOptionValueChangeEvent } from "./components/01-base-components/ds-combobox/ds-combobox";
 import { DsDatepickerBlurEvent, DsDatepickerChangeEvent, DsDatepickerFocusEvent } from "./components/01-base-components/ds-datepicker/ds-datepicker";
-import { LinkTarget as LinkTarget1 } from "./utils/link/linkUtils";
+import { LinkTarget } from "./utils/link/linkUtils";
 import { DsMediaErrorEvent, DsMediaLoadEvent, MediaType } from "./components/01-base-components/ds-media/ds-media";
 import { DsOptionClickEvent, DsOptionLabelChangeEvent, DsOptionMountedEvent, DsOptionValueChangeEvent } from "./components/01-base-components/ds-option/ds-option";
 import { DsOptionsActiveIndexChangeEvent, DsOptionsEscEvent } from "./components/01-base-components/ds-options/ds-options";
@@ -37,16 +35,14 @@ export { DsAccordionToggleEvent } from "./components/01-base-components/ds-accor
 export { DsActionListItemSelectEvent, DsActionListItemVariant } from "./components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item";
 export { DsActionMenuCloseEvent, DsActionMenuOpenEvent } from "./components/01-base-components/ds-action-menu/ds-action-menu";
 export { DsBackdropTransitionEvent } from "./components/01-base-components/ds-backdrop/ds-backdrop";
-export { LinkTarget } from "./components/utils/link/linkUtils";
 export { DsCheckboxBlurEvent, DsCheckboxChangeEvent, DsCheckboxFocusEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
 export { DsSubmitInvalidEvent, DsValidityEvent } from "./utils/controls/controlUtils";
-export { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent, DsCheckboxGroupInvalidStateChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
+export { DsCheckboxGroupAllRequiredChangeEvent, DsCheckboxGroupChangeEvent, DsCheckboxGroupCheckedChangeEvent, DsCheckboxGroupDisabledChangeEvent, DsCheckboxGroupFormChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent, DsCheckboxGroupInvalidStateChangeEvent, DsCheckboxGroupNameChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 export { DsChipClickEvent, DsChipValue } from "./components/01-base-components/ds-chip/ds-chip";
 export { DsChipClickEvent as DsChipClickEvent1 } from "./components/01-base-components/ds-chip/ds-chip";
-export { DsSubmitInvalidEvent as DsSubmitInvalidEvent1, DsValidityEvent as DsValidityEvent1 } from ".";
 export { DsComboboxBlurEvent, DsComboboxChangeEvent, DsComboboxFilterChangeEvent, DsComboboxFocusEvent, DsComboboxMultipleChangeEvent, DsComboboxSelectedOptionRemovedEvent, DsComboboxSelectedOptionValueChangeEvent } from "./components/01-base-components/ds-combobox/ds-combobox";
 export { DsDatepickerBlurEvent, DsDatepickerChangeEvent, DsDatepickerFocusEvent } from "./components/01-base-components/ds-datepicker/ds-datepicker";
-export { LinkTarget as LinkTarget1 } from "./utils/link/linkUtils";
+export { LinkTarget } from "./utils/link/linkUtils";
 export { DsMediaErrorEvent, DsMediaLoadEvent, MediaType } from "./components/01-base-components/ds-media/ds-media";
 export { DsOptionClickEvent, DsOptionLabelChangeEvent, DsOptionMountedEvent, DsOptionValueChangeEvent } from "./components/01-base-components/ds-option/ds-option";
 export { DsOptionsActiveIndexChangeEvent, DsOptionsEscEvent } from "./components/01-base-components/ds-options/ds-options";
@@ -127,7 +123,7 @@ export namespace Components {
         "dsHideTopBorder": boolean;
         /**
           * Id of the accordion button
-          * @default dsAccordionIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId": string;
         /**
@@ -308,7 +304,7 @@ export namespace Components {
           * Passed to the `id` attribute of the `small` element.
           * @default dsAssistiveTextIdGenerator.next().value as string
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * Assistive text.
          */
@@ -352,9 +348,9 @@ export namespace Components {
         "dsHiddenAssistiveText"?: string;
         /**
           * Passed to the `id` attribute of the `span` element.
-          * @default dsBadgeIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * The text content of the badge
           * @default ''
@@ -387,7 +383,7 @@ export namespace Components {
         /**
           * Passed to the `href` attribute of the `a` element
          */
-        "dsHref": string;
+        "dsHref"?: string;
         /**
           * Passed to the `hreflang` attribute of the `a` element
          */
@@ -529,7 +525,7 @@ export namespace Components {
         /**
           * Text that is visually hidden but available to screen readers.
          */
-        "dsHiddenAssistiveText": string;
+        "dsHiddenAssistiveText"?: string;
         /**
           * Icon to display alongside the button text
           * @default ''
@@ -550,9 +546,9 @@ export namespace Components {
         "dsIconTitle"?: string;
         /**
           * Passed to the `id` attribute of the `button` element.
-          * @default buttonIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * If true, the button is styled to be used within an input field
           * @default false
@@ -571,7 +567,7 @@ export namespace Components {
           * Passed to the `name` attribute of the `button` element.
           * @default this.dsId
          */
-        "dsName"?: string;
+        "dsName": string;
         /**
           * Passed to the `role` attribute of the `button` element.
          */
@@ -584,7 +580,7 @@ export namespace Components {
         /**
           * Information for screen readers when spinner is displayed
          */
-        "dsSpinnerHiddenText": string;
+        "dsSpinnerHiddenText"?: string;
         /**
           * Passed to the `tabindex` attribute of the `button` element.
          */
@@ -645,7 +641,7 @@ export namespace Components {
         /**
           * The main heading text
          */
-        "dsHeading": string;
+        "dsHeading"?: string;
         /**
           * Heading level, defaults to 3
           * @default 3
@@ -732,9 +728,9 @@ export namespace Components {
         "dsForm"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered checkbox.
-          * @default checkboxIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "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.
           * @default false
@@ -775,7 +771,7 @@ export namespace Components {
           * Passed to the `value` attribute of the `input` element of the rendered checkbox.
           * @default this.dsId
          */
-        "dsValue"?: string;
+        "dsValue": string;
         "setFocus": () => Promise<void>;
     }
     interface DsCheckboxGroup {
@@ -821,7 +817,7 @@ export namespace Components {
         /**
           * Passed to the `id` attribute of the `input` of parent checkbox element. Read-only.
           * @readonly 
-          * @default `${this.fieldsetId}-checkbox`
+          * @default `${this.generatedId}-checkbox`
          */
         "dsId": string;
         /**
@@ -873,9 +869,9 @@ export namespace Components {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the `button` element.
-          * @default chipIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * @default false
          */
@@ -884,7 +880,7 @@ export namespace Components {
           * Passed to the `name` attribute of the `button` element.
           * @default this.dsId
          */
-        "dsName"?: string;
+        "dsName": string;
         /**
           * Passed to the `role` attribute of the container element.
          */
@@ -907,11 +903,6 @@ export namespace Components {
           * Sets focus to the button element rendered inside `ds-chip` component.
          */
         "setFocus": () => Promise<void>;
-        /**
-          * Sets the `name` attribute of the button element rendered inside `ds-chip` component. Used internally to inherit `ds-chip-group` component `name` attribute.
-          * @param newName new name to set.
-         */
-        "setName": (newName?: string | undefined) => Promise<void>;
     }
     interface DsChipGroup {
         /**
@@ -942,9 +933,9 @@ export namespace Components {
         "dsErrorText"?: string;
         /**
           * Passed to the `id` of the `button` element.
-          * @default chipGroupIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * Label of the chip group.
          */
@@ -965,7 +956,7 @@ export namespace Components {
           * Passed to the `name` attribute of all child `ds-chip` elements.
           * @default this.dsId
          */
-        "dsName"?: string;
+        "dsName": string;
     }
     interface DsCombobox {
         /**
@@ -1014,9 +1005,9 @@ export namespace Components {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered combobox.
-          * @default comboboxIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * Label of the combobox.
          */
@@ -1135,11 +1126,19 @@ export namespace Components {
           * Passed to the `aria-describedby` attribute of the input element.
          */
         "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
         /**
           * Disables the datepicker component, preventing user interaction.
           * @default false
          */
         "dsDisabled": boolean;
+        /**
+          * Array of specific dates to disable in YYYY-MM-DD format.
+         */
+        "dsDisabledDates"?: string[];
         /**
           * Error message displayed when the datepicker component is invalid.
           * @default ''
@@ -1149,6 +1148,10 @@ export namespace Components {
           * Passed to the `form` attribute of the `input` element.
          */
         "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
         /**
           * The unique ID for the datepicker component.
           * @default datepickerIdGenerator.next().value as string
@@ -1156,6 +1159,7 @@ export namespace Components {
         "dsId"?: string;
         /**
           * The label for the datepicker component.
+          * @default ''
          */
         "dsLabel": string;
         /**
@@ -1171,10 +1175,23 @@ export namespace Components {
           * @default this.dsId
          */
         "dsName"?: string;
+        /**
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
         /**
           * Placeholder text displayed when no date is selected.
          */
         "dsPlaceholder"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
+         */
+        "dsReadonly": boolean;
         /**
           * If true, the datepicker is required.
           * @default false
@@ -1182,14 +1199,112 @@ export namespace Components {
         "dsRequired": boolean;
         /**
           * The value of the selected date in YYYY-MM-DD format.
-          * @default null
+          * @default undefined
          */
-        "dsValue": string | null;
+        "dsValue": string | undefined;
         /**
-          * Defines the variant of the datepicker component: - "native" uses the browser's default date input with calendar icon - "simple" uses the browser's default date input without calendar icon (manual input only) - "custom" uses a custom implementation (not yet implemented)
-          * @default 'native'
+          * Defines the variant of the datepicker component: - "custom" uses a custom implementation with dropdown calendar - "native" uses the browser's default date input with calendar icon - "simple" uses the browser's default date input without calendar icon (manual input only)
+          * @default 'custom'
          */
         "dsVariant": 'native' | 'simple' | 'custom';
+        /**
+          * Maximum year shown in the year selector dropdown.
+         */
+        "dsYearRangeEnd"?: number;
+        /**
+          * Minimum year shown in the year selector dropdown.
+         */
+        "dsYearRangeStart"?: number;
+    }
+    interface DsDatepickerCustom {
+        /**
+          * Passed to the `aria-controls` attribute of the input element.
+         */
+        "dsAriaControls"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the input element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * If true, disables the datepicker.
+          * @default false
+         */
+        "dsDisabled": boolean;
+        /**
+          * Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD).
+         */
+        "dsDisabledDates"?: string[];
+        /**
+          * Error text to display below the datepicker.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Passed to the `form` attribute of the `input` element.
+         */
+        "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Unique `id` attribute of the input element.
+         */
+        "dsId"?: string;
+        /**
+          * Label to display above the datepicker.
+          * @default ''
+         */
+        "dsLabel": string;
+        /**
+          * Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-12-31"
+         */
+        "dsMax"?: string;
+        /**
+          * Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-01-01"
+         */
+        "dsMin"?: string;
+        /**
+          * Name attribute for the input element.
+         */
+        "dsName"?: string;
+        /**
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Placeholder text shown when no date is selected.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
+         */
+        "dsReadonly": boolean;
+        /**
+          * If true, the datepicker is required.
+          * @default false
+         */
+        "dsRequired": boolean;
+        /**
+          * Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: "2024-06-15"
+         */
+        "dsValue"?: string;
+        /**
+          * Maximum year shown in the year selector dropdown. Example: 2100
+         */
+        "dsYearRangeEnd"?: number;
+        /**
+          * Minimum year shown in the year selector dropdown. Example: 1900
+         */
+        "dsYearRangeStart"?: number;
     }
     interface DsDatepickerNative {
         /**
@@ -1200,6 +1315,10 @@ export namespace Components {
           * Passed to the `aria-describedby` attribute of the input element.
          */
         "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
         /**
           * If true, disables the input element.
           * @default false
@@ -1213,12 +1332,17 @@ export namespace Components {
           * Passed to the `form` attribute of the `input` element.
          */
         "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
         /**
           * Unique `id` attribute of the input element.
          */
         "dsId"?: string;
         /**
           * Label to display above the datepicker.
+          * @default ''
          */
         "dsLabel": string;
         /**
@@ -1233,6 +1357,19 @@ export namespace Components {
           * Name attribute for the input element.
          */
         "dsName"?: string;
+        /**
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
+         */
+        "dsReadonly": boolean;
         /**
           * If true, the datepicker is required.
           * @default false
@@ -1248,6 +1385,91 @@ export namespace Components {
          */
         "dsValue"?: string;
     }
+    /**
+     * Simple datepicker variant that uses ds-text-input for manual date entry.
+     */
+    interface DsDatepickerSimple {
+        /**
+          * Passed to the `aria-controls` attribute of the input element.
+         */
+        "dsAriaControls"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the input element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * If true, disables the datepicker.
+          * @default false
+         */
+        "dsDisabled": boolean;
+        /**
+          * Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD).
+         */
+        "dsDisabledDates"?: string[];
+        /**
+          * Error text to display below the datepicker.
+         */
+        "dsErrorText"?: string;
+        /**
+          * Passed to the `form` attribute of the `input` element.
+         */
+        "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Unique `id` attribute of the input element.
+         */
+        "dsId"?: string;
+        /**
+          * Label to display above the datepicker.
+          * @default ''
+         */
+        "dsLabel": string;
+        /**
+          * Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-12-31"
+         */
+        "dsMax"?: string;
+        /**
+          * Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-01-01"
+         */
+        "dsMin"?: string;
+        /**
+          * Name attribute for the input element.
+         */
+        "dsName"?: string;
+        /**
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Placeholder text shown when no date is selected.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
+         */
+        "dsReadonly": boolean;
+        /**
+          * If true, the datepicker is required.
+          * @default false
+         */
+        "dsRequired": boolean;
+        /**
+          * Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: "2024-06-15"
+         */
+        "dsValue"?: string;
+    }
     interface DsFeedback {
         /**
           * Passed to the `aria-atomic` attribute of the rendered element.
@@ -5149,7 +5371,7 @@ export namespace Components {
         /**
           * Passed to the `href` attribute of the `a` element
          */
-        "dsHref": string;
+        "dsHref"?: string;
         /**
           * Passed to the `hreflang` attribute of the `a` element
          */
@@ -5196,11 +5418,11 @@ export namespace Components {
           * Specifies the HTML tag to render for the link component.  By default, the link is rendered as an `<a>` element. However, when using client-side routing libraries like `react-router`, you may want to render the link as a `<span>` instead, and wrap this component with a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without causing a full page reload.
           * @default 'a'
          */
-        "dsTag"?: 'a' | 'span';
+        "dsTag": 'a' | 'span';
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -5256,7 +5478,7 @@ export namespace Components {
         /**
           * Passed to the `href` attribute of the `a` element
          */
-        "dsHref": string;
+        "dsHref"?: string;
         /**
           * Passed to the `hreflang` attribute of the `a` element
          */
@@ -5287,11 +5509,11 @@ export namespace Components {
           * Specifies the HTML tag to render for the link component.  By default, the link is rendered as an `<a>` element. However, when using client-side routing libraries like `react-router`, you may want to render the link as a `<span>` instead, and wrap this component with a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without causing a full page reload.
           * @default 'a'
          */
-        "dsTag"?: 'a' | 'span';
+        "dsTag": 'a' | 'span';
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -5326,7 +5548,7 @@ export namespace Components {
         /**
           * Passed to the `href` attribute of the `a` element
          */
-        "dsHref": string;
+        "dsHref"?: string;
         /**
           * Passed to the `hreflang` attribute of the `a` element
          */
@@ -5360,7 +5582,7 @@ export namespace Components {
           * Link target (e.g., '_blank', '_self')
           * @default '_self'
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Site or application name text
          */
@@ -5387,7 +5609,7 @@ export namespace Components {
         /**
           * Passed to the `href` attribute of the `a` element
          */
-        "dsHref": string;
+        "dsHref"?: string;
         /**
           * Passed to the `hreflang` attribute of the `a` element
          */
@@ -5414,11 +5636,11 @@ export namespace Components {
           * Specifies the HTML tag to render for the link component.  By default, the link is rendered as an `<a>` element. However, when using client-side routing libraries like `react-router`, you may want to render the link as a `<span>` instead, and wrap this component with a router-specific link component (e.g., `<Link>` in React Router) to enable navigation without causing a full page reload.
           * @default 'a'
          */
-        "dsTag"?: 'a' | 'span';
+        "dsTag": 'a' | 'span';
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -5433,7 +5655,7 @@ export namespace Components {
           * Aspect ratio for the media container (e.g., '16/10').
           * @default ''
          */
-        "dsAspectRatio"?: string;
+        "dsAspectRatio": string;
         /**
           * Whether the media should autoplay (video/audio only).
           * @default false
@@ -5513,7 +5735,7 @@ export namespace Components {
         "dsIconAriaLabel"?: string;
         /**
           * The unique identifier for the modal.
-          * @default modalIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId": string;
         /**
@@ -5579,9 +5801,9 @@ export namespace Components {
         "dsIcon": string;
         /**
           * Passed to the `id` attribute of the element root `div` element.
-          * @default notificationIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * @default false
          */
@@ -5880,9 +6102,9 @@ export namespace Components {
         "dsForm"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered radio button.
-          * @default radioButtonIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * Label of the radio button.
          */
@@ -5909,7 +6131,7 @@ export namespace Components {
           * Passed to the `value` attribute of the `input` element of the rendered radio button.
           * @default this.dsId
          */
-        "dsValue"?: string;
+        "dsValue": string;
         "setChecked": () => Promise<void>;
         /**
           * Custom focus method that ensures the correct internal input element is focused
@@ -6033,6 +6255,10 @@ export namespace Components {
           * Returns true if select has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
          */
         "checkValidity": () => Promise<boolean>;
+        /**
+          * Aria label for the select element, used for accessibility when there is no visible label.
+         */
+        "dsAriaLabel"?: string;
         /**
           * If true, allows the user to clear the selected option.
           * @default true
@@ -6061,6 +6287,10 @@ export namespace Components {
           * The name of the icon to display inside the select component.
          */
         "dsIcon"?: string;
+        /**
+          * The size of the icon to display inside the select component.
+         */
+        "dsIconSize"?: string;
         /**
           * The unique ID for the select component.
           * @default selectIdGenerator.next().value as string
@@ -6128,6 +6358,10 @@ export namespace Components {
           * Passed to the `aria-describedby` attribute of the select element.
          */
         "dsAriaDescribedby"?: string;
+        /**
+          * Aria label for the select element, used for accessibility.
+         */
+        "dsAriaLabel"?: string;
         /**
           * If true, disables the select element.
           * @default false
@@ -6148,14 +6382,20 @@ export namespace Components {
         "dsFullWidth": boolean;
         /**
           * Icon name to display inside the select.
+          * @default ''
          */
         "dsIcon": string;
+        /**
+          * Icon size to display inside the select.
+         */
+        "dsIconSize"?: string;
         /**
           * Unique `id` attribute of the select element.
          */
         "dsId"?: string;
         /**
           * Label to display above the select.
+          * @default ''
          */
         "dsLabel": string;
         /**
@@ -6197,7 +6437,7 @@ export namespace Components {
         /**
           * Visually hidden information for screen readers
          */
-        "dsHiddenAssistiveText": string;
+        "dsHiddenAssistiveText"?: string;
         /**
           * Size of the spinner
           * @default 'medium'
@@ -6206,7 +6446,7 @@ export namespace Components {
         /**
           * Text to display alongside spinner
          */
-        "dsText": string;
+        "dsText"?: string;
         /**
           * Where to display the `dsText` property
           * @default 'below'
@@ -6228,7 +6468,7 @@ export namespace Components {
           * @default defaultLanguage
          */
         "dsLanguage": Language;
-        "getLanguage": () => Promise<Language>;
+        "getLanguage": () => Promise<"fi" | "sv" | "en">;
         "setLanguage": (language: Language) => Promise<void>;
     }
     interface DsTab {
@@ -6341,7 +6581,7 @@ export namespace Components {
         /**
           * Passed to the `dsTarget` attribute of the `DsLink` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text to display
           * @default 'Label'
@@ -6414,9 +6654,9 @@ export namespace Components {
         "dsHiddenAssistiveText"?: string;
         /**
           * Passed to the `id` of the `textarea` element.
-          * @default textareaIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * Label of the textarea.
          */
@@ -6478,7 +6718,7 @@ export namespace Components {
         /**
           * Passed to the `aria-label` attribute of the `input` element.
          */
-        "dsAriaLabel": string;
+        "dsAriaLabel"?: string;
         /**
           * Passed to the `aria-labelledby` attribute of the `input` element.
          */
@@ -6503,6 +6743,11 @@ export namespace Components {
           * Passed to the `form` attribute of the `input` element.
          */
         "dsForm"?: string;
+        /**
+          * If true, the text input takes the full width of its container.
+          * @default false
+         */
+        "dsFullWidth": boolean;
         /**
           * Visually hidden additional information for screen readers
          */
@@ -6514,9 +6759,14 @@ export namespace Components {
         "dsIcon": string;
         /**
           * Passed to the `id` attribute of the `input` element.
-          * @default inputIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId": string;
+        /**
+          * If true, shows the input in an invalid state (red border, aria-invalid) without requiring dsErrorText. Useful when parent component renders its own error message.
+          * @default false
+         */
+        "dsInvalid"?: boolean;
         /**
           * Label of the input.
          */
@@ -6656,10 +6906,18 @@ export interface DsDatepickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsDatepickerElement;
 }
+export interface DsDatepickerCustomCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsDatepickerCustomElement;
+}
 export interface DsDatepickerNativeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsDatepickerNativeElement;
 }
+export interface DsDatepickerSimpleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsDatepickerSimpleElement;
+}
 export interface DsLinkCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsLinkElement;
@@ -6949,6 +7207,11 @@ declare global {
         "dsCheckboxGroupChange": DsCheckboxGroupChangeEvent;
         "dsCheckboxGroupIndeterminateChildChange": DsCheckboxGroupIndeterminateChildChangeEvent;
         "dsCheckboxGroupInvalidStateChange": DsCheckboxGroupInvalidStateChangeEvent;
+        "dsCheckboxGroupDisabledChange": DsCheckboxGroupDisabledChangeEvent;
+        "dsCheckboxGroupAllRequiredChange": DsCheckboxGroupAllRequiredChangeEvent;
+        "dsCheckboxGroupFormChange": DsCheckboxGroupFormChangeEvent;
+        "dsCheckboxGroupNameChange": DsCheckboxGroupNameChangeEvent;
+        "dsCheckboxGroupCheckedChange": DsCheckboxGroupCheckedChangeEvent;
         "dsSubmitInvalid": DsSubmitInvalidEvent;
         "dsValidity": DsValidityEvent;
     }
@@ -6985,8 +7248,8 @@ declare global {
     };
     interface HTMLDsChipGroupElementEventMap {
         "dsChipClick": DsChipClickEvent1;
-        "dsSubmitInvalid": DsSubmitInvalidEvent1;
-        "dsValidity": DsValidityEvent1;
+        "dsSubmitInvalid": DsSubmitInvalidEvent;
+        "dsValidity": DsValidityEvent;
     }
     interface HTMLDsChipGroupElement extends Components.DsChipGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsChipGroupElementEventMap>(type: K, listener: (this: HTMLDsChipGroupElement, ev: DsChipGroupCustomEvent<HTMLDsChipGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7054,6 +7317,27 @@ declare global {
         prototype: HTMLDsDatepickerElement;
         new (): HTMLDsDatepickerElement;
     };
+    interface HTMLDsDatepickerCustomElementEventMap {
+        "dsChange": string;
+        "dsValidity": DsValidityEvent;
+        "dsSubmitInvalid": DsSubmitInvalidEvent;
+        "dsBlur": void;
+        "dsFocus": void;
+    }
+    interface HTMLDsDatepickerCustomElement extends Components.DsDatepickerCustom, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsDatepickerCustomElementEventMap>(type: K, listener: (this: HTMLDsDatepickerCustomElement, ev: DsDatepickerCustomCustomEvent<HTMLDsDatepickerCustomElementEventMap[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 HTMLDsDatepickerCustomElementEventMap>(type: K, listener: (this: HTMLDsDatepickerCustomElement, ev: DsDatepickerCustomCustomEvent<HTMLDsDatepickerCustomElementEventMap[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 HTMLDsDatepickerCustomElement: {
+        prototype: HTMLDsDatepickerCustomElement;
+        new (): HTMLDsDatepickerCustomElement;
+    };
     interface HTMLDsDatepickerNativeElementEventMap {
         "dsChange": string;
         "dsValidity": DsValidityEvent;
@@ -7075,6 +7359,30 @@ declare global {
         prototype: HTMLDsDatepickerNativeElement;
         new (): HTMLDsDatepickerNativeElement;
     };
+    interface HTMLDsDatepickerSimpleElementEventMap {
+        "dsChange": string;
+        "dsValidity": DsValidityEvent;
+        "dsSubmitInvalid": DsSubmitInvalidEvent;
+        "dsBlur": void;
+        "dsFocus": void;
+    }
+    /**
+     * Simple datepicker variant that uses ds-text-input for manual date entry.
+     */
+    interface HTMLDsDatepickerSimpleElement extends Components.DsDatepickerSimple, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsDatepickerSimpleElementEventMap>(type: K, listener: (this: HTMLDsDatepickerSimpleElement, ev: DsDatepickerSimpleCustomEvent<HTMLDsDatepickerSimpleElementEventMap[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 HTMLDsDatepickerSimpleElementEventMap>(type: K, listener: (this: HTMLDsDatepickerSimpleElement, ev: DsDatepickerSimpleCustomEvent<HTMLDsDatepickerSimpleElementEventMap[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 HTMLDsDatepickerSimpleElement: {
+        prototype: HTMLDsDatepickerSimpleElement;
+        new (): HTMLDsDatepickerSimpleElement;
+    };
     interface HTMLDsFeedbackElement extends Components.DsFeedback, HTMLStencilElement {
     }
     var HTMLDsFeedbackElement: {
@@ -9295,7 +9603,9 @@ declare global {
         "ds-combobox": HTMLDsComboboxElement;
         "ds-control-label": HTMLDsControlLabelElement;
         "ds-datepicker": HTMLDsDatepickerElement;
+        "ds-datepicker-custom": HTMLDsDatepickerCustomElement;
         "ds-datepicker-native": HTMLDsDatepickerNativeElement;
+        "ds-datepicker-simple": HTMLDsDatepickerSimpleElement;
         "ds-feedback": HTMLDsFeedbackElement;
         "ds-grid": HTMLDsGridElement;
         "ds-group-label": HTMLDsGroupLabelElement;
@@ -9686,7 +9996,7 @@ declare namespace LocalJSX {
         "dsHideTopBorder"?: boolean;
         /**
           * Id of the accordion button
-          * @default dsAccordionIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -9905,7 +10215,7 @@ declare namespace LocalJSX {
         "dsHiddenAssistiveText"?: string;
         /**
           * Passed to the `id` attribute of the `span` element.
-          * @default dsBadgeIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10116,7 +10426,7 @@ declare namespace LocalJSX {
         "dsIconTitle"?: string;
         /**
           * Passed to the `id` attribute of the `button` element.
-          * @default buttonIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10294,7 +10604,7 @@ declare namespace LocalJSX {
         "dsForm"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered checkbox.
-          * @default checkboxIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10408,7 +10718,7 @@ declare namespace LocalJSX {
         /**
           * Passed to the `id` attribute of the `input` of parent checkbox element. Read-only.
           * @readonly 
-          * @default `${this.fieldsetId}-checkbox`
+          * @default `${this.generatedId}-checkbox`
          */
         "dsId"?: string;
         /**
@@ -10446,10 +10756,14 @@ declare namespace LocalJSX {
           * The name of the element, used when submitting an HTML form.
          */
         "name"?: string;
+        "onDsCheckboxGroupAllRequiredChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupAllRequiredChangeEvent>) => void;
         /**
           * `dsCheckboxGroupChange` event is emitted when all:  - checkboxes become `checked` - checkboxes were `checked` and one or more become `unchecked`  This is used internally to synchronize the state of checkbox groups.
          */
         "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupChangeEvent>) => void;
+        "onDsCheckboxGroupCheckedChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupCheckedChangeEvent>) => void;
+        "onDsCheckboxGroupDisabledChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupDisabledChangeEvent>) => void;
+        "onDsCheckboxGroupFormChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupFormChangeEvent>) => 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.
          */
@@ -10458,6 +10772,7 @@ declare namespace LocalJSX {
           * The `dsCheckboxGroupInvalidStateChange` event is emitted when the `dsErrorText` property changes. The event `detail` is `dsErrorText`. This event is mainly used internally to synchronize the invalid state of checkboxes.
          */
         "onDsCheckboxGroupInvalidStateChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupInvalidStateChangeEvent>) => void;
+        "onDsCheckboxGroupNameChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupNameChangeEvent>) => void;
         /**
           * The `dsSubmitInvalid` event is emitted when the group is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the group is invalid.
          */
@@ -10482,7 +10797,7 @@ declare namespace LocalJSX {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the `button` element.
-          * @default chipIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10544,7 +10859,7 @@ declare namespace LocalJSX {
         "dsErrorText"?: string;
         /**
           * Passed to the `id` of the `button` element.
-          * @default chipGroupIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10583,11 +10898,11 @@ declare namespace LocalJSX {
         /**
           * The `dsSubmitInvalid` event is emitted when the group is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the group is invalid.
          */
-        "onDsSubmitInvalid"?: (event: DsChipGroupCustomEvent<DsSubmitInvalidEvent1>) => void;
+        "onDsSubmitInvalid"?: (event: DsChipGroupCustomEvent<DsSubmitInvalidEvent>) => void;
         /**
           * The `dsValidity` event is emitted when the group's validity state changes.
          */
-        "onDsValidity"?: (event: DsChipGroupCustomEvent<DsValidityEvent1>) => void;
+        "onDsValidity"?: (event: DsChipGroupCustomEvent<DsValidityEvent>) => void;
     }
     interface DsCombobox {
         /**
@@ -10636,7 +10951,7 @@ declare namespace LocalJSX {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered combobox.
-          * @default comboboxIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -10706,93 +11021,330 @@ declare namespace LocalJSX {
          */
         "form"?: string;
         /**
-          * The name of the element, used when submitting an HTML form.
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the combobox loses focus.
+         */
+        "onDsBlur"?: (event: DsComboboxCustomEvent<DsComboboxBlurEvent>) => void;
+        /**
+          * Event emitted when user selects an option. For "default" `dsVariant`.
+         */
+        "onDsChange"?: (event: DsComboboxCustomEvent<DsComboboxChangeEvent>) => void;
+        /**
+          * Event emitted when user interacts with the search input.
+         */
+        "onDsFilterChange"?: (event: DsComboboxCustomEvent<DsComboboxFilterChangeEvent>) => void;
+        /**
+          * Event emitted when the combobox gains focus.
+         */
+        "onDsFocus"?: (event: DsComboboxCustomEvent<DsComboboxFocusEvent>) => void;
+        /**
+          * Event emitted when user selects an option. For "multiple" `dsVariant`.
+         */
+        "onDsMultipleChange"?: (event: DsComboboxCustomEvent<DsComboboxMultipleChangeEvent>) => void;
+        /**
+          * Event emitted when selected option is removed.
+         */
+        "onDsSelectedOptionRemoved"?: (event: DsComboboxCustomEvent<DsComboboxSelectedOptionRemovedEvent>) => void;
+        /**
+          * Event emitted when an option's `dsValue` changes.
+         */
+        "onDsSelectedOptionValueChange"?: (event: DsComboboxCustomEvent<DsComboboxSelectedOptionValueChangeEvent>) => void;
+        /**
+          * The `dsSubmitInvalid` event is emitted when the input is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the input is invalid.
+         */
+        "onDsSubmitInvalid"?: (event: DsComboboxCustomEvent<DsSubmitInvalidEvent>) => void;
+        /**
+          * The `dsValidity` event is emitted when the input's validity state changes.
+         */
+        "onDsValidity"?: (event: DsComboboxCustomEvent<DsValidityEvent>) => void;
+    }
+    interface DsControlLabel {
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Assistive text id for the control.
+         */
+        "dsAssistiveTextId"?: string;
+        /**
+          * Control id associated with the label.
+         */
+        "dsHtmlFor"?: string;
+        /**
+          * Passed to the `id` attribute of the `label` element.
+         */
+        "dsId"?: string;
+        /**
+          * Label of the control.
+         */
+        "dsLabel"?: string;
+        /**
+          * Appends the text "(optional)" to the end of label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Custom text to append to the end of label when `dsOptional` is true.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Appends asterisk (*) to the end of label.
+         */
+        "dsRequired"?: boolean;
+        /**
+          * Visually hidden additional information for screen readers.
+         */
+        "dsVisuallyHiddenAssistiveText"?: string;
+        /**
+          * Visually hidden additional information id for the control.
+         */
+        "dsVisuallyHiddenAssistiveTextId"?: string;
+    }
+    interface DsDatepicker {
+        /**
+          * If `true`, the user cannot interact with the element.
+         */
+        "disabled"?: boolean;
+        /**
+          * Passed to the `aria-controls` attribute of the input element.
+         */
+        "dsAriaControls"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the input element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * Disables the datepicker component, preventing user interaction.
+          * @default false
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Array of specific dates to disable in YYYY-MM-DD format.
+         */
+        "dsDisabledDates"?: string[];
+        /**
+          * Error message displayed when the datepicker component is invalid.
+          * @default ''
+         */
+        "dsErrorText"?: string;
+        /**
+          * Passed to the `form` attribute of the `input` element.
+         */
+        "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * The unique ID for the datepicker component.
+          * @default datepickerIdGenerator.next().value as string
+         */
+        "dsId"?: string;
+        /**
+          * The label for the datepicker component.
+          * @default ''
+         */
+        "dsLabel"?: string;
+        /**
+          * Maximum date in YYYY-MM-DD format.
+         */
+        "dsMax"?: string;
+        /**
+          * Minimum date in YYYY-MM-DD format.
+         */
+        "dsMin"?: string;
+        /**
+          * Passed to the `name` attribute of the datepicker component.
+          * @default this.dsId
+         */
+        "dsName"?: string;
+        /**
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Placeholder text displayed when no date is selected.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
+         */
+        "dsReadonly"?: boolean;
+        /**
+          * If true, the datepicker is required.
+          * @default false
+         */
+        "dsRequired"?: boolean;
+        /**
+          * The value of the selected date in YYYY-MM-DD format.
+          * @default undefined
+         */
+        "dsValue"?: string | undefined;
+        /**
+          * Defines the variant of the datepicker component: - "custom" uses a custom implementation with dropdown calendar - "native" uses the browser's default date input with calendar icon - "simple" uses the browser's default date input without calendar icon (manual input only)
+          * @default 'custom'
+         */
+        "dsVariant"?: 'native' | 'simple' | 'custom';
+        /**
+          * Maximum year shown in the year selector dropdown.
+         */
+        "dsYearRangeEnd"?: number;
+        /**
+          * Minimum year shown in the year selector dropdown.
+         */
+        "dsYearRangeStart"?: number;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Event emitted when the datepicker loses focus.
+         */
+        "onDsBlur"?: (event: DsDatepickerCustomEvent<DsDatepickerBlurEvent>) => void;
+        /**
+          * Event emitted when user selects a date.
+         */
+        "onDsChange"?: (event: DsDatepickerCustomEvent<DsDatepickerChangeEvent>) => void;
+        /**
+          * Event emitted when the datepicker gains focus.
+         */
+        "onDsFocus"?: (event: DsDatepickerCustomEvent<DsDatepickerFocusEvent>) => void;
+        /**
+          * The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the datepicker is invalid.
+         */
+        "onDsSubmitInvalid"?: (event: DsDatepickerCustomEvent<DsSubmitInvalidEvent>) => void;
+        /**
+          * The `dsValidity` event is emitted when the datepicker's validity state changes.
+         */
+        "onDsValidity"?: (event: DsDatepickerCustomEvent<DsValidityEvent>) => void;
+    }
+    interface DsDatepickerCustom {
+        /**
+          * Passed to the `aria-controls` attribute of the input element.
+         */
+        "dsAriaControls"?: string;
+        /**
+          * Passed to the `aria-describedby` attribute of the input element.
+         */
+        "dsAriaDescribedby"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * If true, disables the datepicker.
+          * @default false
+         */
+        "dsDisabled"?: boolean;
+        /**
+          * Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD).
+         */
+        "dsDisabledDates"?: string[];
+        /**
+          * Error text to display below the datepicker.
          */
-        "name"?: string;
+        "dsErrorText"?: string;
         /**
-          * Event emitted when the combobox loses focus.
+          * Passed to the `form` attribute of the `input` element.
          */
-        "onDsBlur"?: (event: DsComboboxCustomEvent<DsComboboxBlurEvent>) => void;
+        "dsForm"?: string;
         /**
-          * Event emitted when user selects an option. For "default" `dsVariant`.
+          * Visually hidden text for screen readers only.
          */
-        "onDsChange"?: (event: DsComboboxCustomEvent<DsComboboxChangeEvent>) => void;
+        "dsHiddenAssistiveText"?: string;
         /**
-          * Event emitted when user interacts with the search input.
+          * Unique `id` attribute of the input element.
          */
-        "onDsFilterChange"?: (event: DsComboboxCustomEvent<DsComboboxFilterChangeEvent>) => void;
+        "dsId"?: string;
         /**
-          * Event emitted when the combobox gains focus.
+          * Label to display above the datepicker.
+          * @default ''
          */
-        "onDsFocus"?: (event: DsComboboxCustomEvent<DsComboboxFocusEvent>) => void;
+        "dsLabel"?: string;
         /**
-          * Event emitted when user selects an option. For "multiple" `dsVariant`.
+          * Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-12-31"
          */
-        "onDsMultipleChange"?: (event: DsComboboxCustomEvent<DsComboboxMultipleChangeEvent>) => void;
+        "dsMax"?: string;
         /**
-          * Event emitted when selected option is removed.
+          * Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-01-01"
          */
-        "onDsSelectedOptionRemoved"?: (event: DsComboboxCustomEvent<DsComboboxSelectedOptionRemovedEvent>) => void;
+        "dsMin"?: string;
         /**
-          * Event emitted when an option's `dsValue` changes.
+          * Name attribute for the input element.
          */
-        "onDsSelectedOptionValueChange"?: (event: DsComboboxCustomEvent<DsComboboxSelectedOptionValueChangeEvent>) => void;
+        "dsName"?: string;
         /**
-          * The `dsSubmitInvalid` event is emitted when the input is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the input is invalid.
+          * Displays indicator that the datepicker is optional alongside label.
          */
-        "onDsSubmitInvalid"?: (event: DsComboboxCustomEvent<DsSubmitInvalidEvent>) => void;
+        "dsOptional"?: boolean;
         /**
-          * The `dsValidity` event is emitted when the input's validity state changes.
+          * Text shown alongside label, if the datepicker is set as optional.
          */
-        "onDsValidity"?: (event: DsComboboxCustomEvent<DsValidityEvent>) => void;
-    }
-    interface DsControlLabel {
+        "dsOptionalText"?: string;
         /**
-          * Text for additional information shown below label.
+          * Placeholder text shown when no date is selected.
          */
-        "dsAssistiveText"?: string;
+        "dsPlaceholder"?: string;
         /**
-          * Assistive text id for the control.
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
          */
-        "dsAssistiveTextId"?: string;
+        "dsReadonly"?: boolean;
         /**
-          * Control id associated with the label.
+          * If true, the datepicker is required.
+          * @default false
          */
-        "dsHtmlFor"?: string;
+        "dsRequired"?: boolean;
         /**
-          * Passed to the `id` attribute of the `label` element.
+          * Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: "2024-06-15"
          */
-        "dsId"?: string;
+        "dsValue"?: string;
         /**
-          * Label of the control.
+          * Maximum year shown in the year selector dropdown. Example: 2100
          */
-        "dsLabel"?: string;
+        "dsYearRangeEnd"?: number;
         /**
-          * Appends the text "(optional)" to the end of label.
+          * Minimum year shown in the year selector dropdown. Example: 1900
          */
-        "dsOptional"?: boolean;
+        "dsYearRangeStart"?: number;
         /**
-          * Custom text to append to the end of label when `dsOptional` is true.
+          * Event emitted when the datepicker loses focus.
          */
-        "dsOptionalText"?: string;
+        "onDsBlur"?: (event: DsDatepickerCustomCustomEvent<void>) => void;
         /**
-          * Appends asterisk (*) to the end of label.
+          * Emitted when the date value changes.
          */
-        "dsRequired"?: boolean;
+        "onDsChange"?: (event: DsDatepickerCustomCustomEvent<string>) => void;
         /**
-          * Visually hidden additional information for screen readers.
+          * Event emitted when the datepicker gains focus.
          */
-        "dsVisuallyHiddenAssistiveText"?: string;
+        "onDsFocus"?: (event: DsDatepickerCustomCustomEvent<void>) => void;
         /**
-          * Visually hidden additional information id for the control.
+          * The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form.
          */
-        "dsVisuallyHiddenAssistiveTextId"?: string;
-    }
-    interface DsDatepicker {
+        "onDsSubmitInvalid"?: (event: DsDatepickerCustomCustomEvent<DsSubmitInvalidEvent>) => void;
         /**
-          * If `true`, the user cannot interact with the element.
+          * The `dsValidity` event is emitted when the datepicker's validity state changes.
          */
-        "disabled"?: boolean;
+        "onDsValidity"?: (event: DsDatepickerCustomCustomEvent<DsValidityEvent>) => void;
+    }
+    interface DsDatepickerNative {
         /**
           * Passed to the `aria-controls` attribute of the input element.
          */
@@ -10802,13 +11354,16 @@ declare namespace LocalJSX {
          */
         "dsAriaDescribedby"?: string;
         /**
-          * Disables the datepicker component, preventing user interaction.
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * If true, disables the input element.
           * @default false
          */
         "dsDisabled"?: boolean;
         /**
-          * Error message displayed when the datepicker component is invalid.
-          * @default ''
+          * Error text to display below the datepicker.
          */
         "dsErrorText"?: string;
         /**
@@ -10816,12 +11371,16 @@ declare namespace LocalJSX {
          */
         "dsForm"?: string;
         /**
-          * The unique ID for the datepicker component.
-          * @default datepickerIdGenerator.next().value as string
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
+        /**
+          * Unique `id` attribute of the input element.
          */
         "dsId"?: string;
         /**
-          * The label for the datepicker component.
+          * Label to display above the datepicker.
+          * @default ''
          */
         "dsLabel"?: string;
         /**
@@ -10833,59 +11392,61 @@ declare namespace LocalJSX {
          */
         "dsMin"?: string;
         /**
-          * Passed to the `name` attribute of the datepicker component.
-          * @default this.dsId
+          * Name attribute for the input element.
          */
         "dsName"?: string;
         /**
-          * Placeholder text displayed when no date is selected.
+          * Displays indicator that the datepicker is optional alongside label.
          */
-        "dsPlaceholder"?: string;
+        "dsOptional"?: boolean;
         /**
-          * If true, the datepicker is required.
-          * @default false
+          * Text shown alongside label, if the datepicker is set as optional.
          */
-        "dsRequired"?: boolean;
+        "dsOptionalText"?: string;
         /**
-          * The value of the selected date in YYYY-MM-DD format.
-          * @default null
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
+          * @default false
          */
-        "dsValue"?: string | null;
+        "dsReadonly"?: boolean;
         /**
-          * Defines the variant of the datepicker component: - "native" uses the browser's default date input with calendar icon - "simple" uses the browser's default date input without calendar icon (manual input only) - "custom" uses a custom implementation (not yet implemented)
-          * @default 'native'
+          * If true, the datepicker is required.
+          * @default false
          */
-        "dsVariant"?: 'native' | 'simple' | 'custom';
+        "dsRequired"?: boolean;
         /**
-          * The `id` of a `<form>` element to associate this element with.
+          * If true, shows the calendar icon that opens the date picker.
+          * @default true
          */
-        "form"?: string;
+        "dsShowCalendarIcon"?: boolean;
         /**
-          * The name of the element, used when submitting an HTML form.
+          * Currently selected value in YYYY-MM-DD format.
          */
-        "name"?: string;
+        "dsValue"?: string;
         /**
           * Event emitted when the datepicker loses focus.
          */
-        "onDsBlur"?: (event: DsDatepickerCustomEvent<DsDatepickerBlurEvent>) => void;
+        "onDsBlur"?: (event: DsDatepickerNativeCustomEvent<void>) => void;
         /**
           * Event emitted when user selects a date.
          */
-        "onDsChange"?: (event: DsDatepickerCustomEvent<DsDatepickerChangeEvent>) => void;
+        "onDsChange"?: (event: DsDatepickerNativeCustomEvent<string>) => void;
         /**
           * Event emitted when the datepicker gains focus.
          */
-        "onDsFocus"?: (event: DsDatepickerCustomEvent<DsDatepickerFocusEvent>) => void;
+        "onDsFocus"?: (event: DsDatepickerNativeCustomEvent<void>) => void;
         /**
-          * The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form. Calling `checkValidity()` method will also emit this event if the datepicker is invalid.
+          * The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form.
          */
-        "onDsSubmitInvalid"?: (event: DsDatepickerCustomEvent<DsSubmitInvalidEvent>) => void;
+        "onDsSubmitInvalid"?: (event: DsDatepickerNativeCustomEvent<DsSubmitInvalidEvent>) => void;
         /**
           * The `dsValidity` event is emitted when the datepicker's validity state changes.
          */
-        "onDsValidity"?: (event: DsDatepickerCustomEvent<DsValidityEvent>) => void;
+        "onDsValidity"?: (event: DsDatepickerNativeCustomEvent<DsValidityEvent>) => void;
     }
-    interface DsDatepickerNative {
+    /**
+     * Simple datepicker variant that uses ds-text-input for manual date entry.
+     */
+    interface DsDatepickerSimple {
         /**
           * Passed to the `aria-controls` attribute of the input element.
          */
@@ -10895,10 +11456,18 @@ declare namespace LocalJSX {
          */
         "dsAriaDescribedby"?: string;
         /**
-          * If true, disables the input element.
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
+        /**
+          * If true, disables the datepicker.
           * @default false
          */
         "dsDisabled"?: boolean;
+        /**
+          * Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD).
+         */
+        "dsDisabledDates"?: string[];
         /**
           * Error text to display below the datepicker.
          */
@@ -10907,20 +11476,25 @@ declare namespace LocalJSX {
           * Passed to the `form` attribute of the `input` element.
          */
         "dsForm"?: string;
+        /**
+          * Visually hidden text for screen readers only.
+         */
+        "dsHiddenAssistiveText"?: string;
         /**
           * Unique `id` attribute of the input element.
          */
         "dsId"?: string;
         /**
           * Label to display above the datepicker.
+          * @default ''
          */
         "dsLabel"?: string;
         /**
-          * Maximum date in YYYY-MM-DD format.
+          * Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-12-31"
          */
         "dsMax"?: string;
         /**
-          * Minimum date in YYYY-MM-DD format.
+          * Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: "2024-01-01"
          */
         "dsMin"?: string;
         /**
@@ -10928,39 +11502,51 @@ declare namespace LocalJSX {
          */
         "dsName"?: string;
         /**
-          * If true, the datepicker is required.
+          * Displays indicator that the datepicker is optional alongside label.
+         */
+        "dsOptional"?: boolean;
+        /**
+          * Text shown alongside label, if the datepicker is set as optional.
+         */
+        "dsOptionalText"?: string;
+        /**
+          * Placeholder text shown when no date is selected.
+         */
+        "dsPlaceholder"?: string;
+        /**
+          * If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted.
           * @default false
          */
-        "dsRequired"?: boolean;
+        "dsReadonly"?: boolean;
         /**
-          * If true, shows the calendar icon that opens the date picker.
-          * @default true
+          * If true, the datepicker is required.
+          * @default false
          */
-        "dsShowCalendarIcon"?: boolean;
+        "dsRequired"?: boolean;
         /**
-          * Currently selected value in YYYY-MM-DD format.
+          * Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: "2024-06-15"
          */
         "dsValue"?: string;
         /**
           * Event emitted when the datepicker loses focus.
          */
-        "onDsBlur"?: (event: DsDatepickerNativeCustomEvent<void>) => void;
+        "onDsBlur"?: (event: DsDatepickerSimpleCustomEvent<void>) => void;
         /**
-          * Event emitted when user selects a date.
+          * Emitted when the date value changes.
          */
-        "onDsChange"?: (event: DsDatepickerNativeCustomEvent<string>) => void;
+        "onDsChange"?: (event: DsDatepickerSimpleCustomEvent<string>) => void;
         /**
           * Event emitted when the datepicker gains focus.
          */
-        "onDsFocus"?: (event: DsDatepickerNativeCustomEvent<void>) => void;
+        "onDsFocus"?: (event: DsDatepickerSimpleCustomEvent<void>) => void;
         /**
           * The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form.
          */
-        "onDsSubmitInvalid"?: (event: DsDatepickerNativeCustomEvent<DsSubmitInvalidEvent>) => void;
+        "onDsSubmitInvalid"?: (event: DsDatepickerSimpleCustomEvent<DsSubmitInvalidEvent>) => void;
         /**
           * The `dsValidity` event is emitted when the datepicker's validity state changes.
          */
-        "onDsValidity"?: (event: DsDatepickerNativeCustomEvent<DsValidityEvent>) => void;
+        "onDsValidity"?: (event: DsDatepickerSimpleCustomEvent<DsValidityEvent>) => void;
     }
     interface DsFeedback {
         /**
@@ -14914,7 +15500,7 @@ declare namespace LocalJSX {
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -15000,7 +15586,7 @@ declare namespace LocalJSX {
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -15073,7 +15659,7 @@ declare namespace LocalJSX {
           * Link target (e.g., '_blank', '_self')
           * @default '_self'
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Site or application name text
          */
@@ -15135,7 +15721,7 @@ declare namespace LocalJSX {
         /**
           * Passed to the `target` attribute of the `a` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text content of the link
          */
@@ -15242,7 +15828,7 @@ declare namespace LocalJSX {
         "dsIconAriaLabel"?: string;
         /**
           * The unique identifier for the modal.
-          * @default modalIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -15312,7 +15898,7 @@ declare namespace LocalJSX {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the element root `div` element.
-          * @default notificationIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -15629,7 +16215,7 @@ declare namespace LocalJSX {
         "dsForm"?: string;
         /**
           * Passed to the `id` attribute of the `input` element of the rendered radio button.
-          * @default radioButtonIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -15835,6 +16421,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the element.
          */
         "disabled"?: boolean;
+        /**
+          * Aria label for the select element, used for accessibility when there is no visible label.
+         */
+        "dsAriaLabel"?: string;
         /**
           * If true, allows the user to clear the selected option.
           * @default true
@@ -15863,6 +16453,10 @@ declare namespace LocalJSX {
           * The name of the icon to display inside the select component.
          */
         "dsIcon"?: string;
+        /**
+          * The size of the icon to display inside the select component.
+         */
+        "dsIconSize"?: string;
         /**
           * The unique ID for the select component.
           * @default selectIdGenerator.next().value as string
@@ -15960,6 +16554,10 @@ declare namespace LocalJSX {
           * Passed to the `aria-describedby` attribute of the select element.
          */
         "dsAriaDescribedby"?: string;
+        /**
+          * Aria label for the select element, used for accessibility.
+         */
+        "dsAriaLabel"?: string;
         /**
           * If true, disables the select element.
           * @default false
@@ -15980,14 +16578,20 @@ declare namespace LocalJSX {
         "dsFullWidth"?: boolean;
         /**
           * Icon name to display inside the select.
+          * @default ''
          */
         "dsIcon"?: string;
+        /**
+          * Icon size to display inside the select.
+         */
+        "dsIconSize"?: string;
         /**
           * Unique `id` attribute of the select element.
          */
         "dsId"?: string;
         /**
           * Label to display above the select.
+          * @default ''
          */
         "dsLabel"?: string;
         /**
@@ -16187,7 +16791,7 @@ declare namespace LocalJSX {
         /**
           * Passed to the `dsTarget` attribute of the `DsLink` element
          */
-        "dsTarget"?: LinkTarget1;
+        "dsTarget"?: LinkTarget;
         /**
           * Text to display
           * @default 'Label'
@@ -16256,7 +16860,7 @@ declare namespace LocalJSX {
         "dsHiddenAssistiveText"?: string;
         /**
           * Passed to the `id` of the `textarea` element.
-          * @default textareaIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
         /**
@@ -16367,6 +16971,11 @@ declare namespace LocalJSX {
           * Passed to the `form` attribute of the `input` element.
          */
         "dsForm"?: string;
+        /**
+          * If true, the text input takes the full width of its container.
+          * @default false
+         */
+        "dsFullWidth"?: boolean;
         /**
           * Visually hidden additional information for screen readers
          */
@@ -16378,9 +16987,14 @@ declare namespace LocalJSX {
         "dsIcon"?: string;
         /**
           * Passed to the `id` attribute of the `input` element.
-          * @default inputIdGenerator.next().value as string
+          * @default this.getUniqueId()
          */
         "dsId"?: string;
+        /**
+          * If true, shows the input in an invalid state (red border, aria-invalid) without requiring dsErrorText. Useful when parent component renders its own error message.
+          * @default false
+         */
+        "dsInvalid"?: boolean;
         /**
           * Label of the input.
          */
@@ -16679,8 +17293,6 @@ declare namespace LocalJSX {
     }
     interface DsChipAttributes {
         "dsMuteAriaDeprecationWarning": boolean;
-        "dsRole": string;
-        "dsAriaLabel": string;
         "dsForm": string;
         "dsId": string;
         "dsName": string;
@@ -16688,6 +17300,8 @@ declare namespace LocalJSX {
         "dsText": string;
         "dsIcon": string;
         "dsType": DsType;
+        "dsRole": string;
+        "dsAriaLabel": string;
     }
     interface DsChipGroupAttributes {
         "dsMuteAriaDeprecationWarning": boolean;
@@ -16751,15 +17365,22 @@ declare namespace LocalJSX {
         "dsPlaceholder": string;
         "dsVariant": 'native' | 'simple' | 'custom';
         "dsDisabled": boolean;
+        "dsReadonly": boolean;
         "dsErrorText": string;
-        "dsValue": string | null;
+        "dsAssistiveText": string;
+        "dsHiddenAssistiveText": string;
+        "dsValue": string | undefined;
         "dsRequired": boolean;
+        "dsOptional": boolean;
+        "dsOptionalText": string;
         "dsMin": string;
         "dsMax": string;
+        "dsYearRangeStart": number;
+        "dsYearRangeEnd": number;
         "dsAriaDescribedby": string;
         "dsAriaControls": string;
     }
-    interface DsDatepickerNativeAttributes {
+    interface DsDatepickerCustomAttributes {
         "dsAriaDescribedby": string;
         "dsAriaControls": string;
         "dsId": string;
@@ -16768,11 +17389,58 @@ declare namespace LocalJSX {
         "dsName": string;
         "dsForm": string;
         "dsDisabled": boolean;
+        "dsReadonly": boolean;
+        "dsErrorText": string;
+        "dsRequired": boolean;
+        "dsOptional": boolean;
+        "dsOptionalText": string;
+        "dsAssistiveText": string;
+        "dsHiddenAssistiveText": string;
+        "dsPlaceholder": string;
+        "dsMin": string;
+        "dsMax": string;
+        "dsYearRangeStart": number;
+        "dsYearRangeEnd": number;
+    }
+    interface DsDatepickerNativeAttributes {
+        "dsId": string;
+        "dsLabel": string;
+        "dsValue": string;
+        "dsName": string;
+        "dsForm": string;
+        "dsDisabled": boolean;
+        "dsReadonly": boolean;
         "dsErrorText": string;
         "dsRequired": boolean;
+        "dsOptional": boolean;
+        "dsOptionalText": string;
+        "dsAssistiveText": string;
+        "dsHiddenAssistiveText": string;
         "dsMin": string;
         "dsMax": string;
         "dsShowCalendarIcon": boolean;
+        "dsAriaDescribedby": string;
+        "dsAriaControls": string;
+    }
+    interface DsDatepickerSimpleAttributes {
+        "dsAriaDescribedby": string;
+        "dsAriaControls": string;
+        "dsId": string;
+        "dsLabel": string;
+        "dsValue": string;
+        "dsName": string;
+        "dsForm": string;
+        "dsDisabled": boolean;
+        "dsReadonly": boolean;
+        "dsErrorText": string;
+        "dsRequired": boolean;
+        "dsOptional": boolean;
+        "dsOptionalText": string;
+        "dsAssistiveText": string;
+        "dsHiddenAssistiveText": string;
+        "dsPlaceholder": string;
+        "dsMin": string;
+        "dsMax": string;
     }
     interface DsFeedbackAttributes {
         "dsTag": 'div' | 'span';
@@ -19029,6 +19697,7 @@ declare namespace LocalJSX {
         "dsDisabled": boolean;
         "dsErrorText": string;
         "dsIcon": string;
+        "dsIconSize": string;
         "dsValue": string | string[] | null;
         "dsLoading": boolean;
         "dsLoadingText": string;
@@ -19037,6 +19706,7 @@ declare namespace LocalJSX {
         "dsOptionsErrorText": string;
         "dsFullWidth": boolean;
         "dsRequired": boolean;
+        "dsAriaLabel": string;
     }
     interface DsSelectNativeAttributes {
         "dsMuteAriaDeprecationWarning": boolean;
@@ -19047,12 +19717,14 @@ declare namespace LocalJSX {
         "dsPlaceholder": string;
         "dsValue": string;
         "dsIcon": string;
+        "dsIconSize": string;
         "dsName": string;
         "dsForm": string;
         "dsDisabled": boolean;
         "dsErrorText": string;
         "dsFullWidth": boolean;
         "dsRequired": boolean;
+        "dsAriaLabel": string;
     }
     interface DsSpinnerAttributes {
         "dsText": string;
@@ -19159,6 +19831,8 @@ declare namespace LocalJSX {
         "dsAriaLabel": string;
         "dsAriaLabelledby": string;
         "dsAriaDescribedby": string;
+        "dsInvalid": boolean;
+        "dsFullWidth": boolean;
     }
     interface DsVisuallyHiddenAttributes {
         "dsTag": 'div' | 'span';
@@ -19188,7 +19862,9 @@ declare namespace LocalJSX {
         "ds-combobox": Omit<DsCombobox, keyof DsComboboxAttributes> & { [K in keyof DsCombobox & keyof DsComboboxAttributes]?: DsCombobox[K] } & { [K in keyof DsCombobox & keyof DsComboboxAttributes as `attr:${K}`]?: DsComboboxAttributes[K] } & { [K in keyof DsCombobox & keyof DsComboboxAttributes as `prop:${K}`]?: DsCombobox[K] };
         "ds-control-label": Omit<DsControlLabel, keyof DsControlLabelAttributes> & { [K in keyof DsControlLabel & keyof DsControlLabelAttributes]?: DsControlLabel[K] } & { [K in keyof DsControlLabel & keyof DsControlLabelAttributes as `attr:${K}`]?: DsControlLabelAttributes[K] } & { [K in keyof DsControlLabel & keyof DsControlLabelAttributes as `prop:${K}`]?: DsControlLabel[K] };
         "ds-datepicker": Omit<DsDatepicker, keyof DsDatepickerAttributes> & { [K in keyof DsDatepicker & keyof DsDatepickerAttributes]?: DsDatepicker[K] } & { [K in keyof DsDatepicker & keyof DsDatepickerAttributes as `attr:${K}`]?: DsDatepickerAttributes[K] } & { [K in keyof DsDatepicker & keyof DsDatepickerAttributes as `prop:${K}`]?: DsDatepicker[K] };
+        "ds-datepicker-custom": Omit<DsDatepickerCustom, keyof DsDatepickerCustomAttributes> & { [K in keyof DsDatepickerCustom & keyof DsDatepickerCustomAttributes]?: DsDatepickerCustom[K] } & { [K in keyof DsDatepickerCustom & keyof DsDatepickerCustomAttributes as `attr:${K}`]?: DsDatepickerCustomAttributes[K] } & { [K in keyof DsDatepickerCustom & keyof DsDatepickerCustomAttributes as `prop:${K}`]?: DsDatepickerCustom[K] };
         "ds-datepicker-native": Omit<DsDatepickerNative, keyof DsDatepickerNativeAttributes> & { [K in keyof DsDatepickerNative & keyof DsDatepickerNativeAttributes]?: DsDatepickerNative[K] } & { [K in keyof DsDatepickerNative & keyof DsDatepickerNativeAttributes as `attr:${K}`]?: DsDatepickerNativeAttributes[K] } & { [K in keyof DsDatepickerNative & keyof DsDatepickerNativeAttributes as `prop:${K}`]?: DsDatepickerNative[K] };
+        "ds-datepicker-simple": Omit<DsDatepickerSimple, keyof DsDatepickerSimpleAttributes> & { [K in keyof DsDatepickerSimple & keyof DsDatepickerSimpleAttributes]?: DsDatepickerSimple[K] } & { [K in keyof DsDatepickerSimple & keyof DsDatepickerSimpleAttributes as `attr:${K}`]?: DsDatepickerSimpleAttributes[K] } & { [K in keyof DsDatepickerSimple & keyof DsDatepickerSimpleAttributes as `prop:${K}`]?: DsDatepickerSimple[K] };
         "ds-feedback": Omit<DsFeedback, keyof DsFeedbackAttributes> & { [K in keyof DsFeedback & keyof DsFeedbackAttributes]?: DsFeedback[K] } & { [K in keyof DsFeedback & keyof DsFeedbackAttributes as `attr:${K}`]?: DsFeedbackAttributes[K] } & { [K in keyof DsFeedback & keyof DsFeedbackAttributes as `prop:${K}`]?: DsFeedback[K] };
         "ds-grid": Omit<DsGrid, keyof DsGridAttributes> & { [K in keyof DsGrid & keyof DsGridAttributes]?: DsGrid[K] } & { [K in keyof DsGrid & keyof DsGridAttributes as `attr:${K}`]?: DsGridAttributes[K] } & { [K in keyof DsGrid & keyof DsGridAttributes as `prop:${K}`]?: DsGrid[K] };
         "ds-group-label": Omit<DsGroupLabel, keyof DsGroupLabelAttributes> & { [K in keyof DsGroupLabel & keyof DsGroupLabelAttributes]?: DsGroupLabel[K] } & { [K in keyof DsGroupLabel & keyof DsGroupLabelAttributes as `attr:${K}`]?: DsGroupLabelAttributes[K] } & { [K in keyof DsGroupLabel & keyof DsGroupLabelAttributes as `prop:${K}`]?: DsGroupLabel[K] };
@@ -19538,7 +20214,12 @@ declare module "@stencil/core" {
             "ds-combobox": LocalJSX.IntrinsicElements["ds-combobox"] & JSXBase.HTMLAttributes<HTMLDsComboboxElement>;
             "ds-control-label": LocalJSX.IntrinsicElements["ds-control-label"] & JSXBase.HTMLAttributes<HTMLDsControlLabelElement>;
             "ds-datepicker": LocalJSX.IntrinsicElements["ds-datepicker"] & JSXBase.HTMLAttributes<HTMLDsDatepickerElement>;
+            "ds-datepicker-custom": LocalJSX.IntrinsicElements["ds-datepicker-custom"] & JSXBase.HTMLAttributes<HTMLDsDatepickerCustomElement>;
             "ds-datepicker-native": LocalJSX.IntrinsicElements["ds-datepicker-native"] & JSXBase.HTMLAttributes<HTMLDsDatepickerNativeElement>;
+            /**
+             * Simple datepicker variant that uses ds-text-input for manual date entry.
+             */
+            "ds-datepicker-simple": LocalJSX.IntrinsicElements["ds-datepicker-simple"] & JSXBase.HTMLAttributes<HTMLDsDatepickerSimpleElement>;
             "ds-feedback": LocalJSX.IntrinsicElements["ds-feedback"] & JSXBase.HTMLAttributes<HTMLDsFeedbackElement>;
             "ds-grid": LocalJSX.IntrinsicElements["ds-grid"] & JSXBase.HTMLAttributes<HTMLDsGridElement>;
             "ds-group-label": LocalJSX.IntrinsicElements["ds-group-label"] & JSXBase.HTMLAttributes<HTMLDsGroupLabelElement>;