fix: improve of null/undefined values for Angular wrapper

src/elements/calendar/calendar.ts

@@ -123,7 +123,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
   @property()
-  public set max(value: SbbDateLike<T> | undefined) {
+  public set max(value: SbbDateLike<T> | null) {
     this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
   }
   public get max(): T | null {
@@ -133,7 +133,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
   @property()
-  public set now(value: SbbDateLike<T> | undefined) {
+  public set now(value: SbbDateLike<T> | null) {
     this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
   }
   public get now(): T {
@@ -143,7 +143,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
   @property()
-  public set selected(value: SbbDateLike<T> | undefined) {
+  public set selected(value: SbbDateLike<T> | null) {
     this._selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     if (
       !!this._selectedDate &&

src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts

@@ -157,14 +157,14 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
       return;
     }
     calendar.wide = datepicker.wide;
-    calendar.now = this._nowOrUndefined();
+    calendar.now = this._nowOrNull();
     calendar.dateFilter = datepicker.dateFilter;
   }
 
   private _datePickerChanged(event: Event): void {
     this._datePickerElement = event.target as SbbDatepickerElement<T>;
     if (this._calendarElement) {
-      this._calendarElement.selected = this._datePickerElement.valueAsDate || undefined;
+      this._calendarElement.selected = this._datePickerElement.valueAsDate ?? null;
     }
   }
 
@@ -179,7 +179,7 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
     ) {
       return;
     }
-    this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? undefined;
+    this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? null;
     this._configureCalendar(this._calendarElement, this._datePickerElement!);
     this._calendarElement.resetPosition();
   }
@@ -190,8 +190,8 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
     this._popoverElement.trigger = this._triggerElement;
   }
 
-  private _nowOrUndefined(): T | undefined {
-    return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : undefined;
+  private _nowOrNull(): T | null {
+    return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : null;
   }
 
   protected override render(): TemplateResult {
@@ -220,7 +220,7 @@ class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(SbbHydration
               .view=${this.view}
               .min=${this._min}
               .max=${this._max}
-              .now=${this._nowOrUndefined()}
+              .now=${this._nowOrNull()}
               ?wide=${this._datePickerElement?.wide}
               .dateFilter=${this._datePickerElement?.dateFilter}
               @dateSelected=${(d: CustomEvent<T>) => {

src/elements/navigation/common/navigation-action-common.ts

@@ -21,7 +21,7 @@ export declare class SbbNavigationActionCommonElementMixinType {
   public accessor size: SbbNavigationActionSize;
   public get marker(): SbbNavigationMarkerElement | null;
   public get section(): SbbNavigationSectionElement | null;
-  public connectedSection: SbbNavigationSectionElement | null;
+  public connectedSection: SbbNavigationSectionElement | undefined;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

src/elements/slider/slider.ts

@@ -56,8 +56,8 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen
 
   /** Numeric value for the inner HTMLInputElement. */
   @property({ attribute: 'value-as-number', type: Number })
-  public set valueAsNumber(value: number) {
-    this.value = value?.toString();
+  public set valueAsNumber(value: number | null) {
+    this.value = value?.toString() || null;
   }
   public get valueAsNumber(): number | null {
     return Number(this.value);

src/elements/stepper/stepper/stepper.ts

@@ -37,8 +37,8 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
 
   /** Overrides the behaviour of `orientation` property. */
   @property({ attribute: 'horizontal-from', reflect: true })
-  public set horizontalFrom(value: SbbHorizontalFrom) {
-    this._horizontalFrom = breakpoints.includes(value) ? value : undefined;
+  public set horizontalFrom(value: SbbHorizontalFrom | undefined) {
+    this._horizontalFrom = value && breakpoints.includes(value) ? value : undefined;
     if (this._horizontalFrom && this._loaded) {
       this._checkOrientation();
     }
@@ -60,7 +60,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
 
   /** The currently selected step. */
   @property({ attribute: false })
-  public set selected(step: SbbStepElement) {
+  public set selected(step: SbbStepElement | undefined) {
     if (this._loaded) {
       this._select(step);
     }
@@ -71,8 +71,8 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
 
   /** The currently selected step index. */
   @property({ attribute: 'selected-index', type: Number })
-  public set selectedIndex(index: number) {
-    if (this._loaded) {
+  public set selectedIndex(index: number | undefined) {
+    if (this._loaded && index !== undefined) {
       this._select(this.steps[index]);
     }
   }
@@ -122,7 +122,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
     }
   }
 
-  private _isValidStep(step: SbbStepElement): boolean {
+  private _isValidStep(step: SbbStepElement | undefined): boolean {
     if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) {
       return false;
     }
@@ -139,7 +139,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
     return true;
   }
 
-  private _select(step: SbbStepElement): void {
+  private _select(step: SbbStepElement | undefined): void {
     if (!this._isValidStep(step)) {
       return;
     }
@@ -154,7 +154,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) {
     }
     const current = this.selected;
     current?.deselect();
-    step.select();
+    step!.select();
     this._setMarkerSize();
     this._configureLinearMode();
     // In case the focus is currently inside the stepper, we focus the selected step label.

src/elements/tag/tag-group/tag-group.ts

@@ -58,7 +58,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typeof Lit
    * If set multiple to true, the value is an array.
    */
   @property()
-  public set value(value: string | string[] | null) {
+  public set value(value: string | (string | null)[] | null) {
     const tags = this.tags;
     if (isServer) {
       this._value = value;
@@ -91,7 +91,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typeof Lit
         ? this.tags.filter((t) => t.checked).map((t) => t.value)
         : (this.tags.find((t) => t.checked)?.value ?? null);
   }
-  private _value: string | string[] | null = null;
+  private _value: string | (string | null)[] | null = null;
 
   /** The child instances of sbb-tag as an array. */
   public get tags(): SbbTagElement[] {

src/elements/time-input/time-input.ts

@@ -37,7 +37,7 @@ class SbbTimeInputElement extends LitElement {
 
   /** Reference of the native input connected to the datepicker. */
   @property()
-  public set input(value: string | HTMLElement) {
+  public set input(value: string | HTMLElement | null) {
     this._input = value;
     this._findInputElement();
   }