From bbba2e1be90b71f8c4314f1934ab50688f2ccf1a Mon Sep 17 00:00:00 2001
From: Ricardo Hauschild <Ricardo.Hauschild@telekom.de>
Date: Mon, 9 Feb 2026 11:22:03 +0100
Subject: [PATCH 1/3] feat: add hide-label-visually prop

---
 .../components/date-picker/date-picker.css    | 11 ++++++++++
 .../components/date-picker/date-picker.tsx    | 12 ++++++++++-
 .../src/components/textarea/textarea.css      | 11 ++++++++++
 .../src/components/textarea/textarea.tsx      | 20 ++++++++++++++-----
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css
index c03c70d843..68b5f66ba6 100644
--- a/packages/components/src/components/date-picker/date-picker.css
+++ b/packages/components/src/components/date-picker/date-picker.css
@@ -437,3 +437,14 @@ scale-date-picker .has-helper-text scale-helper-text {
     max-width: none;
   }
 }
+.date-picker__label--visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 3bc10f91db..e04f5441ad 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -155,6 +155,9 @@ export class DatePicker {
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
 
+  /** (optional) Visually hide the label (remains accessible to screen readers) */
+  @Prop() hideLabelVisually?: boolean = false;
+
   /** Whether the input element has focus */
   @State() hasFocus: boolean = false;
 
@@ -434,9 +437,16 @@ export class DatePicker {
             this.helperText && 'has-helper-text'
           )}
         >
-          <label class="date-picker__label" htmlFor={this.identifier}>
+          <label
+            class={classNames(
+              'date-picker__label',
+              this.hideLabelVisually && 'date-picker__label--visually-hidden'
+            )}
+            htmlFor={this.identifier}
+          >
             {this.label}
           </label>
+
           <duet-date-picker
             onDuetChange={(e) => {
               emitEvent(this, 'scaleChange', e.detail);
diff --git a/packages/components/src/components/textarea/textarea.css b/packages/components/src/components/textarea/textarea.css
index bdda55a2f0..fad2289e82 100644
--- a/packages/components/src/components/textarea/textarea.css
+++ b/packages/components/src/components/textarea/textarea.css
@@ -207,3 +207,14 @@ scale-textarea {
   border-color: var(--border-color-disabled);
   background-color: var(--background-color-disabled);
 }
+.textarea__label--visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx
index b8d39bc831..ca19b655e5 100644
--- a/packages/components/src/components/textarea/textarea.tsx
+++ b/packages/components/src/components/textarea/textarea.tsx
@@ -34,6 +34,7 @@ interface InputChangeEventDetail {
 })
 export class Textarea {
   @Element() hostElement: HTMLElement;
+
   /** (optional) Input name */
   @Prop() name?: string = '';
   /** (optional) Input label */
@@ -79,7 +80,8 @@ export class Textarea {
   @Prop() styles?: string;
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
-
+  /** (optional) Visually hide the label (remains accessible to screen readers) */
+  @Prop() hideLabelVisually?: boolean = false;
   /** Emitted when a keyboard input occurred. */
   @Event({ eventName: 'scale-input' }) scaleInput!: EventEmitter<KeyboardEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -94,11 +96,13 @@ export class Textarea {
   /** Emitted when the input has focus. */
   @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
   /** @deprecated in v3 in favor of kebab-case event names */
-  @Event({ eventName: 'scaleFocus' }) scaleFocusLegacy!: EventEmitter<void>;
+  @Event({ eventName: 'scaleFocus' })
+  scaleFocusLegacy!: EventEmitter<void>;
   /** Emitted when the input loses focus. */
   @Event({ eventName: 'scale-blur' }) scaleBlur!: EventEmitter<void>;
   /** @deprecated in v3 in favor of kebab-case event names */
-  @Event({ eventName: 'scaleBlur' }) scaleBlurLegacy!: EventEmitter<void>;
+  @Event({ eventName: 'scaleBlur' })
+  scaleBlurLegacy!: EventEmitter<void>;
   /** Emitted on keydown. */
   @Event({ eventName: 'scale-keydown' })
   scaleKeyDown!: EventEmitter<KeyboardEvent>;
@@ -129,7 +133,6 @@ export class Textarea {
       });
     }
   }
-
   // We're not watching `value` like we used to
   // because we get unwanted `scaleChange` events
   // because how we keep this.value up-to-date for type="select"
@@ -191,9 +194,16 @@ export class Textarea {
             }
           >
             {/* Accessibility: label should be always *before* the actual input */}
-            <label class="textarea__label" htmlFor={this.inputId}>
+            <label
+              class={classNames(
+                'textarea__label',
+                this.hideLabelVisually && 'textarea__label--visually-hidden'
+              )}
+              htmlFor={this.inputId}
+            >
               {this.label}
             </label>
+
             <textarea
               class="textarea__control"
               style={!!this.resize && { resize: this.resize }}

From 2556ff0b05b85f05ac46de5a31771b13dd4c0412 Mon Sep 17 00:00:00 2001
From: Ricardo Hauschild <Ricardo.Hauschild@telekom.de>
Date: Mon, 9 Feb 2026 11:42:51 +0100
Subject: [PATCH 2/3] docs: update README

---
 .../src/components/date-picker/readme.md      | 49 ++++++++++---------
 .../src/components/textarea/readme.md         | 49 ++++++++++---------
 2 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/packages/components/src/components/date-picker/readme.md b/packages/components/src/components/date-picker/readme.md
index 06836403f4..afd6645027 100644
--- a/packages/components/src/components/date-picker/readme.md
+++ b/packages/components/src/components/date-picker/readme.md
@@ -7,30 +7,31 @@
 
 ## Properties
 
-| Property         | Attribute           | Description                                                                                                                                                                                                                                           | Type                                                    | Default           |
-| ---------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `ariaDetailsId`  | `aria-details-id`   | (optional) id or space separated list of ids of elements that provide or link to additional related information.                                                                                                                                      | `string`                                                | `undefined`       |
-| `dateAdapter`    | `date-adapter`      | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any`                                                   | `undefined`       |
-| `direction`      | `direction`         | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.                        | `"left" \| "right"`                                     | `'right'`         |
-| `disabled`       | `disabled`          | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.                                                                             | `boolean`                                               | `false`           |
-| `firstDayOfWeek` | `first-day-of-week` | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.                                                                                                                                                | `any`                                                   | `undefined`       |
-| `helperText`     | `helper-text`       | (optional) Helper text                                                                                                                                                                                                                                | `string`                                                | `''`              |
-| `identifier`     | `identifier`        | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.                                                                                                                                                          | `string`                                                | `undefined`       |
-| `innerRole`      | `inner-role`        | Defines a specific role attribute for the date picker input.                                                                                                                                                                                          | `string`                                                | `undefined`       |
-| `invalid`        | `invalid`           | (optional) invalid status                                                                                                                                                                                                                             | `boolean`                                               | `undefined`       |
-| `label`          | `label`             | (optional) Label                                                                                                                                                                                                                                      | `string`                                                | `''`              |
-| `localization`   | --                  | Button labels, day names, month names, etc, used for localization. Default is English.                                                                                                                                                                | `DuetLocalizedText & { today: string; }`                | `undefined`       |
-| `max`            | `max`               | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.                                                                                                          | `string`                                                | `''`              |
-| `min`            | `min`               | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.                                                                                                          | `string`                                                | `''`              |
-| `name`           | `name`              | Name of the date picker input.                                                                                                                                                                                                                        | `string`                                                | `'date'`          |
-| `placeholder`    | `placeholder`       | (optional) Input place holder                                                                                                                                                                                                                         | `string`                                                | `''`              |
-| `popupTitle`     | `popup-title`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/>                                                                                                                                              | `string`                                                | `'Pick a date'`   |
-| `required`       | `required`          | Should the input be marked as required?                                                                                                                                                                                                               | `boolean`                                               | `false`           |
-| `size`           | `size`              | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                                                                                                                                                                            | `string`                                                | `undefined`       |
-| `status`         | `status`            | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                                                                                                                                                             | `string`                                                | `''`              |
-| `styles`         | `styles`            | (optional) Injected CSS styles                                                                                                                                                                                                                        | `string`                                                | `undefined`       |
-| `value`          | `value`             | Date value. Must be in IS0-8601 format: YYYY-MM-DD.                                                                                                                                                                                                   | `string`                                                | `''`              |
-| `variant`        | `variant`           |                                                                                                                                                                                                                                                       | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| Property            | Attribute             | Description                                                                                                                                                                                                                                           | Type                                                    | Default           |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information.                                                                                                                                      | `string`                                                | `undefined`       |
+| `dateAdapter`       | `date-adapter`        | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any`                                                   | `undefined`       |
+| `direction`         | `direction`           | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.                        | `"left" \| "right"`                                     | `'right'`         |
+| `disabled`          | `disabled`            | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.                                                                             | `boolean`                                               | `false`           |
+| `firstDayOfWeek`    | `first-day-of-week`   | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.                                                                                                                                                | `any`                                                   | `undefined`       |
+| `helperText`        | `helper-text`         | (optional) Helper text                                                                                                                                                                                                                                | `string`                                                | `''`              |
+| `hideLabelVisually` | `hide-label-visually` | (optional) Visually hide the label (remains accessible to screen readers)                                                                                                                                                                             | `boolean`                                               | `false`           |
+| `identifier`        | `identifier`          | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.                                                                                                                                                          | `string`                                                | `undefined`       |
+| `innerRole`         | `inner-role`          | Defines a specific role attribute for the date picker input.                                                                                                                                                                                          | `string`                                                | `undefined`       |
+| `invalid`           | `invalid`             | (optional) invalid status                                                                                                                                                                                                                             | `boolean`                                               | `undefined`       |
+| `label`             | `label`               | (optional) Label                                                                                                                                                                                                                                      | `string`                                                | `''`              |
+| `localization`      | --                    | Button labels, day names, month names, etc, used for localization. Default is English.                                                                                                                                                                | `DuetLocalizedText & { today: string; }`                | `undefined`       |
+| `max`               | `max`                 | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.                                                                                                          | `string`                                                | `''`              |
+| `min`               | `min`                 | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.                                                                                                          | `string`                                                | `''`              |
+| `name`              | `name`                | Name of the date picker input.                                                                                                                                                                                                                        | `string`                                                | `'date'`          |
+| `placeholder`       | `placeholder`         | (optional) Input place holder                                                                                                                                                                                                                         | `string`                                                | `''`              |
+| `popupTitle`        | `popup-title`         | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/>                                                                                                                                              | `string`                                                | `'Pick a date'`   |
+| `required`          | `required`            | Should the input be marked as required?                                                                                                                                                                                                               | `boolean`                                               | `false`           |
+| `size`              | `size`                | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                                                                                                                                                                            | `string`                                                | `undefined`       |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                                                                                                                                                             | `string`                                                | `''`              |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                                                                                                                                                                                        | `string`                                                | `undefined`       |
+| `value`             | `value`               | Date value. Must be in IS0-8601 format: YYYY-MM-DD.                                                                                                                                                                                                   | `string`                                                | `''`              |
+| `variant`           | `variant`             |                                                                                                                                                                                                                                                       | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
 
 
 ## Events
diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
index c5e9044087..c7dbf6cd38 100644
--- a/packages/components/src/components/textarea/readme.md
+++ b/packages/components/src/components/textarea/readme.md
@@ -7,30 +7,31 @@
 
 ## Properties
 
-| Property         | Attribute         | Description                                                                                                      | Type                                                    | Default           |
-| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `ariaDetailsId`  | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`       |
-| `cols`           | `cols`            | (optional) textarea column                                                                                       | `number`                                                | `undefined`       |
-| `counter`        | `counter`         | (optional) Input counter                                                                                         | `boolean`                                               | `undefined`       |
-| `disabled`       | `disabled`        | (optional) Input disabled                                                                                        | `boolean`                                               | `undefined`       |
-| `helperText`     | `helper-text`     | (optional) Input helper text                                                                                     | `string`                                                | `''`              |
-| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads.                                         | `boolean`                                               | `undefined`       |
-| `inputId`        | `input-id`        | (optional) Input checkbox id                                                                                     | `string`                                                | `undefined`       |
-| `invalid`        | `invalid`         | (optional) Input status                                                                                          | `boolean`                                               | `false`           |
-| `label`          | `label`           | (optional) Input label                                                                                           | `string`                                                | `''`              |
-| `maxLength`      | `max-length`      | (optional) Input max length                                                                                      | `number`                                                | `undefined`       |
-| `minLength`      | `min-length`      | (optional) Input min length                                                                                      | `number`                                                | `undefined`       |
-| `name`           | `name`            | (optional) Input name                                                                                            | `string`                                                | `''`              |
-| `placeholder`    | `placeholder`     | (optional) Input placeHolder                                                                                     | `string`                                                | `''`              |
-| `readonly`       | `readonly`        | (optional) Input readonly                                                                                        | `boolean`                                               | `undefined`       |
-| `required`       | `required`        | (optional) Input required                                                                                        | `boolean`                                               | `undefined`       |
-| `resize`         | `resize`          | (optional) textarea resize                                                                                       | `"horizontal" \| "none" \| "unset" \| "vertical"`       | `undefined`       |
-| `rows`           | `rows`            | (optional) textarea row                                                                                          | `number`                                                | `undefined`       |
-| `status`         | `status`          | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`                                                | `''`              |
-| `styles`         | `styles`          | (optional) Injected CSS styles                                                                                   | `string`                                                | `undefined`       |
-| `transparent`    | `transparent`     | (optional) input background transparent                                                                          | `boolean`                                               | `undefined`       |
-| `value`          | `value`           | (optional) Input value                                                                                           | `number \| string`                                      | `''`              |
-| `variant`        | `variant`         | (optional) Variant                                                                                               | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| Property            | Attribute             | Description                                                                                                      | Type                                                    | Default           |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`       |
+| `cols`              | `cols`                | (optional) textarea column                                                                                       | `number`                                                | `undefined`       |
+| `counter`           | `counter`             | (optional) Input counter                                                                                         | `boolean`                                               | `undefined`       |
+| `disabled`          | `disabled`            | (optional) Input disabled                                                                                        | `boolean`                                               | `undefined`       |
+| `helperText`        | `helper-text`         | (optional) Input helper text                                                                                     | `string`                                                | `''`              |
+| `hideLabelVisually` | `hide-label-visually` | (optional) Visually hide the label (remains accessible to screen readers)                                        | `boolean`                                               | `false`           |
+| `inputAutofocus`    | `input-autofocus`     | (optional) the input should automatically get focus when the page loads.                                         | `boolean`                                               | `undefined`       |
+| `inputId`           | `input-id`            | (optional) Input checkbox id                                                                                     | `string`                                                | `undefined`       |
+| `invalid`           | `invalid`             | (optional) Input status                                                                                          | `boolean`                                               | `false`           |
+| `label`             | `label`               | (optional) Input label                                                                                           | `string`                                                | `''`              |
+| `maxLength`         | `max-length`          | (optional) Input max length                                                                                      | `number`                                                | `undefined`       |
+| `minLength`         | `min-length`          | (optional) Input min length                                                                                      | `number`                                                | `undefined`       |
+| `name`              | `name`                | (optional) Input name                                                                                            | `string`                                                | `''`              |
+| `placeholder`       | `placeholder`         | (optional) Input placeHolder                                                                                     | `string`                                                | `''`              |
+| `readonly`          | `readonly`            | (optional) Input readonly                                                                                        | `boolean`                                               | `undefined`       |
+| `required`          | `required`            | (optional) Input required                                                                                        | `boolean`                                               | `undefined`       |
+| `resize`            | `resize`              | (optional) textarea resize                                                                                       | `"horizontal" \| "none" \| "unset" \| "vertical"`       | `undefined`       |
+| `rows`              | `rows`                | (optional) textarea row                                                                                          | `number`                                                | `undefined`       |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                        | `string`                                                | `''`              |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                                                   | `string`                                                | `undefined`       |
+| `transparent`       | `transparent`         | (optional) input background transparent                                                                          | `boolean`                                               | `undefined`       |
+| `value`             | `value`               | (optional) Input value                                                                                           | `number \| string`                                      | `''`              |
+| `variant`           | `variant`             | (optional) Variant                                                                                               | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
 
 
 ## Events

From 3fc1582e55a446d671dfc38b6a0fb67a33ad0887 Mon Sep 17 00:00:00 2001
From: Amir Baghdoust <baghdoust@gmail.com>
Date: Thu, 19 Feb 2026 22:59:02 +0100
Subject: [PATCH 3/3] feat: add hideLabelVisually property to date picker
 component

---
 .../src/components/date-picker/readme.md      | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/components/date-picker/readme.md b/packages/components/src/components/date-picker/readme.md
index 1bdb5ec335..fd471c8163 100644
--- a/packages/components/src/components/date-picker/readme.md
+++ b/packages/components/src/components/date-picker/readme.md
@@ -7,30 +7,31 @@
 
 ## Properties
 
-| Property         | Attribute           | Description                                                                                                                                                                                                                                           | Type                                                    | Default           |
-| ---------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `ariaDetailsId`  | `aria-details-id`   | (optional) id or space separated list of ids of elements that provide or link to additional related information.                                                                                                                                      | `string`                                                | `undefined`       |
-| `dateAdapter`    | `date-adapter`      | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any`                                                   | `undefined`       |
-| `direction`      | `direction`         | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.                        | `"left" \| "right"`                                     | `'right'`         |
-| `disabled`       | `disabled`          | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.                                                                             | `boolean`                                               | `false`           |
-| `firstDayOfWeek` | `first-day-of-week` | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.                                                                                                                                                | `any`                                                   | `undefined`       |
-| `helperText`     | `helper-text`       | (optional) Helper text                                                                                                                                                                                                                                | `string`                                                | `''`              |
-| `identifier`     | `identifier`        | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.                                                                                                                                                          | `string`                                                | `undefined`       |
-| `innerRole`      | `inner-role`        | Defines a specific role attribute for the date picker input.                                                                                                                                                                                          | `string`                                                | `undefined`       |
-| `invalid`        | `invalid`           | (optional) invalid status                                                                                                                                                                                                                             | `boolean`                                               | `undefined`       |
-| `label`          | `label`             | (optional) Label                                                                                                                                                                                                                                      | `string`                                                | `''`              |
-| `localization`   | `localization`      | Button labels, day names, month names, etc, used for localization. Default is English.                                                                                                                                                                | `DuetLocalizedText & { today: string; }`                | `undefined`       |
-| `max`            | `max`               | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.                                                                                                          | `string`                                                | `''`              |
-| `min`            | `min`               | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.                                                                                                          | `string`                                                | `''`              |
-| `name`           | `name`              | Name of the date picker input.                                                                                                                                                                                                                        | `string`                                                | `'date'`          |
-| `placeholder`    | `placeholder`       | (optional) Input place holder                                                                                                                                                                                                                         | `string`                                                | `''`              |
-| `popupTitle`     | `popup-title`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/>                                                                                                                                              | `string`                                                | `'Pick a date'`   |
-| `required`       | `required`          | Should the input be marked as required?                                                                                                                                                                                                               | `boolean`                                               | `false`           |
-| `size`           | `size`              | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                                                                                                                                                                            | `string`                                                | `undefined`       |
-| `status`         | `status`            | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                                                                                                                                                             | `string`                                                | `''`              |
-| `styles`         | `styles`            | (optional) Injected CSS styles                                                                                                                                                                                                                        | `string`                                                | `undefined`       |
-| `value`          | `value`             | Date value. Must be in IS0-8601 format: YYYY-MM-DD.                                                                                                                                                                                                   | `string`                                                | `''`              |
-| `variant`        | `variant`           |                                                                                                                                                                                                                                                       | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| Property            | Attribute             | Description                                                                                                                                                                                                                                           | Type                                                    | Default           |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information.                                                                                                                                      | `string`                                                | `undefined`       |
+| `dateAdapter`       | `date-adapter`        | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any`                                                   | `undefined`       |
+| `direction`         | `direction`           | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.                        | `"left" \| "right"`                                     | `'right'`         |
+| `disabled`          | `disabled`            | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.                                                                             | `boolean`                                               | `false`           |
+| `firstDayOfWeek`    | `first-day-of-week`   | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.                                                                                                                                                | `any`                                                   | `undefined`       |
+| `helperText`        | `helper-text`         | (optional) Helper text                                                                                                                                                                                                                                | `string`                                                | `''`              |
+| `hideLabelVisually` | `hide-label-visually` | (optional) Visually hide the label (remains accessible to screen readers)                                                                                                                                                                             | `boolean`                                               | `false`           |
+| `identifier`        | `identifier`          | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.                                                                                                                                                          | `string`                                                | `undefined`       |
+| `innerRole`         | `inner-role`          | Defines a specific role attribute for the date picker input.                                                                                                                                                                                          | `string`                                                | `undefined`       |
+| `invalid`           | `invalid`             | (optional) invalid status                                                                                                                                                                                                                             | `boolean`                                               | `undefined`       |
+| `label`             | `label`               | (optional) Label                                                                                                                                                                                                                                      | `string`                                                | `''`              |
+| `localization`      | `localization`        | Button labels, day names, month names, etc, used for localization. Default is English.                                                                                                                                                                | `DuetLocalizedText & { today: string; }`                | `undefined`       |
+| `max`               | `max`                 | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.                                                                                                          | `string`                                                | `''`              |
+| `min`               | `min`                 | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.                                                                                                          | `string`                                                | `''`              |
+| `name`              | `name`                | Name of the date picker input.                                                                                                                                                                                                                        | `string`                                                | `'date'`          |
+| `placeholder`       | `placeholder`         | (optional) Input place holder                                                                                                                                                                                                                         | `string`                                                | `''`              |
+| `popupTitle`        | `popup-title`         | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/>                                                                                                                                              | `string`                                                | `'Pick a date'`   |
+| `required`          | `required`            | Should the input be marked as required?                                                                                                                                                                                                               | `boolean`                                               | `false`           |
+| `size`              | `size`                | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                                                                                                                                                                            | `string`                                                | `undefined`       |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/>                                                                                                                                                             | `string`                                                | `''`              |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                                                                                                                                                                                        | `string`                                                | `undefined`       |
+| `value`             | `value`               | Date value. Must be in IS0-8601 format: YYYY-MM-DD.                                                                                                                                                                                                   | `string`                                                | `''`              |
+| `variant`           | `variant`             |                                                                                                                                                                                                                                                       | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
 
 
 ## Events