feat: add property requiredAnnotation to disable visual indicator (*) for semantically marked required form elements (#4366)

* feat: add property `requiredAnnotation` to disable visual indicator (`*`) for semantically marked required form elements

closes #4197

* auto update snapshots (#4367)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: update property showRequiredAsterisk

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: 4 people

__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png

@@ -63,6 +63,7 @@ We use [Mitosis](https://github.com/BuilderIO/Mitosis/tree/main/docs) to develop
 3. Try to parameterize a lot: For example if your component includes an icon button you should give it a text for accessibility. You should provide a default text, so it can't be empty, but you should also let the user change it with a property e.g. `iconButtonText`.
 4. To enable some native functionalities for Vue and Angular (`v-model` and `[(ng-model)]`) you might need to add some extra code to your component. At the generation process you might select `formValue` anyhow, but otherwise take a look at the `input` to see what you need to add to make this work.
 5. Angular can be challenging; here are some issues to be aware of:
+
     1. Angular generates custom HTML tags as wrappers, which may affect your `CSS` selectors. For example if we have a button inside our component and we try to change the styling with `.db-button: {xxx:abc;}` it would not add the styling to the button. As a workaround you should write `.db-button, .db-button > button: {xxx:abc;}` to cover Angular as well:
 
     ```html

__snapshots__/input/patternhub/input-properties-should-match-screenshot.png

@@ -32,6 +32,7 @@ Across the surveyed design systems, there is a kind of pattern for tables:
     This ensures maximum accessibility out of the box, since screen readers and keyboard users already understand native table structures.
 
 2. **Progressive Enhancement of Interactivity**
+
     - **Static by Default**: Some systems stick to purely static tables with CSS-based styling (striped rows, borders) and responsive wrappers for horizontal scrolling. Those have no built-in interactivity (sorting, pagination, etc.).
     - **Developer-Driven Features**: Several systems provide core table markup plus optional wrappers or slots for sorting, sticky headers, and scroll controls, leaving the actual user-driven logic to the implementer.
     - **Built-in Data Tables**: Other systems offer rich, pre-wired data table components with pagination, sorting, row selection, expandable rows, and more. These components manage state, callbacks, and ARIA attributes internally.

__snapshots__/radio/patternhub/radio-properties-should-match-screenshot.png

@@ -192,6 +192,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					disabled={getBoolean(props.disabled, 'disabled')}
 					value={props.value}
 					required={getBoolean(props.required, 'required')}
+					data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
 					onChange={(event: ChangeEvent<HTMLInputElement>) =>
 						state.handleChange(event)
 					}

__snapshots__/select/patternhub/select-properties-should-match-screenshot.png

@@ -10,6 +10,7 @@ import {
 	useStore,
 	useTarget
 } from '@builder.io/mitosis';
+
 import {
 	DEFAULT_CLOSE_BUTTON,
 	DEFAULT_INVALID_MESSAGE,
@@ -814,6 +815,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 					: props.variant
 			}
 			data-required={getBooleanAsString(props.required)}
+			data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
 			data-placement={props.placement}
 			data-selected-type={props.multiple ? props.selectedType : 'text'}
 			data-hide-label={getHideProp(props.showLabel)}