refactor: switch to standard decorators and tighten property types

eslint.config.js

@@ -171,8 +171,6 @@ export default [
           },
         },
       ],
-      // TODO: Activate with standard decorators
-      'lyne/property-decorator-accessor-rule': 'off',
     },
   },
   {

package.json

@@ -161,7 +161,7 @@
   },
   "lint-staged": {
     "*.{js,ts,yaml,yml}": [
-      "eslint --fix"
+      "eslint --fix --no-ignore"
     ],
     "*.scss": [
       "stylelint --fix"

src/elements-experimental/journey-summary/journey-summary.ts

@@ -1,5 +1,6 @@
 import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js';
 import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js';
+import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
 import { i18nTripDuration } from '@sbb-esta/lyne-elements/core/i18n.js';
 import type { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces/types';
 import type { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js';
@@ -35,38 +36,45 @@ export interface InterfaceSbbJourneySummaryAttributes {
  *
  * @slot content - Use this slot to add `sbb-button`s or other interactive elements.
  */
+export
 @customElement('sbb-journey-summary')
-export class SbbJourneySummaryElement extends LitElement {
+class SbbJourneySummaryElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /**  The trip prop */
-  @property({ type: Object }) public trip!: InterfaceSbbJourneySummaryAttributes;
+  @property({ type: Object }) public accessor trip: InterfaceSbbJourneySummaryAttributes = null!;
 
   /**  The tripBack prop */
   @property({ attribute: 'trip-back', type: Object })
-  public tripBack?: InterfaceSbbJourneySummaryAttributes;
+  public accessor tripBack: InterfaceSbbJourneySummaryAttributes = null!;
 
   /**
    * The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.
    */
-  @property({ attribute: 'round-trip', type: Boolean }) public roundTrip?: boolean;
+  @property({ attribute: 'round-trip', type: Boolean })
+  @forceType(Boolean)
+  public accessor roundTrip: boolean = false;
 
   /** Heading level of the journey header element (e.g. h1-h6). */
-  @property({ attribute: 'header-level' }) public headerLevel: SbbTitleLevel = '3';
+  @property({ attribute: 'header-level' }) public accessor headerLevel: SbbTitleLevel = '3';
 
   /**
    * Per default, the current location has a pulsating animation. You can
    * disable the animation with this property.
    */
-  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
+  @property({ attribute: 'disable-animation', type: Boolean })
+  @forceType(Boolean)
+  public accessor disableAnimation: boolean = false;
 
   /**
    * The Footpath attribute for rendering different icons
    * true: render a11y-icon
    * false: render walk-icon
    * default: render walk-icon
    */
-  @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
+  @property({ attribute: 'a11y-footpath', type: Boolean })
+  @forceType(Boolean)
+  public accessor a11yFootpath: boolean = false;
 
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
   @property()

src/elements-experimental/journey-summary/readme.md

@@ -24,15 +24,15 @@ This is helpful if you need a specific state of the component.
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                                | Default | Description                                                                                                                   |
-| ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `a11yFootpath`     | `a11y-footpath`     | public  | `boolean \| undefined`                              |         | The Footpath attribute for rendering different icons true: render a11y-icon false: render walk-icon default: render walk-icon |
-| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined`                              |         | Per default, the current location has a pulsating animation. You can disable the animation with this property.                |
-| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                                     | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                                     |
-| `now`              | `now`               | public  | `Date`                                              | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes.          |
-| `roundTrip`        | `round-trip`        | public  | `boolean \| undefined`                              |         | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                                      |
-| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes`              |         | The trip prop                                                                                                                 |
-| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes \| undefined` |         | The tripBack prop                                                                                                             |
+| Name               | Attribute           | Privacy | Type                                   | Default | Description                                                                                                                   |
+| ------------------ | ------------------- | ------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `a11yFootpath`     | `a11y-footpath`     | public  | `boolean`                              | `false` | The Footpath attribute for rendering different icons true: render a11y-icon false: render walk-icon default: render walk-icon |
+| `disableAnimation` | `disable-animation` | public  | `boolean`                              | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property.                |
+| `headerLevel`      | `header-level`      | public  | `SbbTitleLevel`                        | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                                                                     |
+| `now`              | `now`               | public  | `Date`                                 | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes.          |
+| `roundTrip`        | `round-trip`        | public  | `boolean`                              | `false` | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header.                                      |
+| `trip`             | `trip`              | public  | `InterfaceSbbJourneySummaryAttributes` | `null!` | The trip prop                                                                                                                 |
+| `tripBack`         | `trip-back`         | public  | `InterfaceSbbJourneySummaryAttributes` | `null!` | The tripBack prop                                                                                                             |
 
 ## Slots
 

src/elements-experimental/package.json

@@ -14,7 +14,8 @@
     "@sbb-esta/lyne-elements": "0.0.0-PLACEHOLDER"
   },
   "dependencies": {
-    "lit": "0.0.0-LIT"
+    "lit": "0.0.0-LIT",
+    "tslib": "^2.7.0"
   },
   "publishConfig": {
     "access": "public"

src/elements-experimental/pearl-chain-time/pearl-chain-time.ts

@@ -1,5 +1,6 @@
 import { SbbLanguageController } from '@sbb-esta/lyne-elements/core/controllers.js';
 import { defaultDateAdapter } from '@sbb-esta/lyne-elements/core/datetime.js';
+import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
 import {
   i18nArrival,
   i18nDeparture,
@@ -22,8 +23,9 @@ import '../pearl-chain.js';
 /**
  * Combined with `sbb-pearl-chain`, it displays walk time information.
  */
+export
 @customElement('sbb-pearl-chain-time')
-export class SbbPearlChainTimeElement extends LitElement {
+class SbbPearlChainTimeElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /**
@@ -34,28 +36,33 @@ export class SbbPearlChainTimeElement extends LitElement {
    * to the total travel time. Example: departure 16:30, change at 16:40,
    * arrival at 17:00. So the change should have a duration of 33.33%.
    */
-  @property({ type: Array }) public legs!: (Leg | PtRideLeg)[];
+  @property({ type: Array }) public accessor legs: (Leg | PtRideLeg)[] = [];
 
   /** Prop to render the departure time - will be formatted as "H:mm" */
-  @property({ attribute: 'departure-time' }) public departureTime?: string;
+  @property({ attribute: 'departure-time' }) public accessor departureTime: string = '';
 
   /** Prop to render the arrival time - will be formatted as "H:mm" */
-  @property({ attribute: 'arrival-time' }) public arrivalTime?: string;
+  @property({ attribute: 'arrival-time' }) public accessor arrivalTime: string = '';
 
   /** Optional prop to render the walk time (in minutes) before departure */
-  @property({ attribute: 'departure-walk', type: Number }) public departureWalk?: number;
+  @property({ attribute: 'departure-walk', type: Number }) public accessor departureWalk: number =
+    NaN;
 
   /** Optional prop to render the walk time (in minutes) after arrival */
-  @property({ attribute: 'arrival-walk', type: Number }) public arrivalWalk?: number;
+  @property({ attribute: 'arrival-walk', type: Number }) public accessor arrivalWalk: number = NaN;
 
   /**
    * Per default, the current location has a pulsating animation. You can
    * disable the animation with this property.
    */
-  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
+  @property({ attribute: 'disable-animation', type: Boolean })
+  @forceType(Boolean)
+  public accessor disableAnimation: boolean = false;
 
   /** Optional prop to render wheelchair-small instead of walk-small */
-  @property({ attribute: 'a11y-footpath', type: Boolean }) public a11yFootpath?: boolean;
+  @property({ attribute: 'a11y-footpath', type: Boolean })
+  @forceType(Boolean)
+  public accessor a11yFootpath: boolean = false;
 
   /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
   @property()

src/elements-experimental/pearl-chain-time/readme.md

@@ -55,11 +55,11 @@ This is helpful if you need a specific state of the component.
 
 | Name               | Attribute           | Privacy | Type                   | Default | Description                                                                                                                                                                                                                                                                    |
 | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `a11yFootpath`     | `a11y-footpath`     | public  | `boolean \| undefined` |         | Optional prop to render wheelchair-small instead of walk-small                                                                                                                                                                                                                 |
-| `arrivalTime`      | `arrival-time`      | public  | `string \| undefined`  |         | Prop to render the arrival time - will be formatted as "H:mm"                                                                                                                                                                                                                  |
-| `arrivalWalk`      | `arrival-walk`      | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) after arrival                                                                                                                                                                                                               |
-| `departureTime`    | `departure-time`    | public  | `string \| undefined`  |         | Prop to render the departure time - will be formatted as "H:mm"                                                                                                                                                                                                                |
-| `departureWalk`    | `departure-walk`    | public  | `number \| undefined`  |         | Optional prop to render the walk time (in minutes) before departure                                                                                                                                                                                                            |
-| `disableAnimation` | `disable-animation` | public  | `boolean \| undefined` |         | Per default, the current location has a pulsating animation. You can disable the animation with this property.                                                                                                                                                                 |
-| `legs`             | `legs`              | public  | `(Leg \| PtRideLeg)[]` |         | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
+| `a11yFootpath`     | `a11y-footpath`     | public  | `boolean`              | `false` | Optional prop to render wheelchair-small instead of walk-small                                                                                                                                                                                                                 |
+| `arrivalTime`      | `arrival-time`      | public  | `string`               | `''`    | Prop to render the arrival time - will be formatted as "H:mm"                                                                                                                                                                                                                  |
+| `arrivalWalk`      | `arrival-walk`      | public  | `number`               | `NaN`   | Optional prop to render the walk time (in minutes) after arrival                                                                                                                                                                                                               |
+| `departureTime`    | `departure-time`    | public  | `string`               | `''`    | Prop to render the departure time - will be formatted as "H:mm"                                                                                                                                                                                                                |
+| `departureWalk`    | `departure-walk`    | public  | `number`               | `NaN`   | Optional prop to render the walk time (in minutes) before departure                                                                                                                                                                                                            |
+| `disableAnimation` | `disable-animation` | public  | `boolean`              | `false` | Per default, the current location has a pulsating animation. You can disable the animation with this property.                                                                                                                                                                 |
+| `legs`             | `legs`              | public  | `(Leg \| PtRideLeg)[]` | `[]`    | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. |
 | `now`              | `now`               | public  | `Date`                 | `null`  | A configured date which acts as the current date instead of the real current date. Recommended for testing purposes.                                                                                                                                                           |

src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.ts

@@ -1,3 +1,4 @@
+import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -28,17 +29,19 @@ export interface PearlChainVerticalItemAttributes {
  * @slot left - Content of the left side of the item
  * @slot right - Content of the right side of the item
  */
+export
 @customElement('sbb-pearl-chain-vertical-item')
-export class SbbPearlChainVerticalItemElement extends LitElement {
+class SbbPearlChainVerticalItemElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** The pearlChainVerticalItemAttributes Prop for styling the bullets and line.*/
   @property({ attribute: 'pearl-chain-vertical-item-attributes', type: Object })
-  public pearlChainVerticalItemAttributes!: PearlChainVerticalItemAttributes;
+  public accessor pearlChainVerticalItemAttributes: PearlChainVerticalItemAttributes = null!;
 
   /** If true, the position won't be animated. */
   @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation?: boolean;
+  @forceType(Boolean)
+  public accessor disableAnimation: boolean = false;
 
   protected override render(): TemplateResult {
     const { bulletType, lineType, lineColor, hideLine, minHeight, bulletSize, position } =

src/elements-experimental/pearl-chain-vertical-item/readme.md

@@ -38,8 +38,8 @@ The slots themselves are unstyled, so that they can be used in various ways.
 
 | Name                               | Attribute                              | Privacy | Type                               | Default | Description                                                                 |
 | ---------------------------------- | -------------------------------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `disableAnimation`                 | `disable-animation`                    | public  | `boolean \| undefined`             |         | If true, the position won't be animated.                                    |
-| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public  | `PearlChainVerticalItemAttributes` |         | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. |
+| `disableAnimation`                 | `disable-animation`                    | public  | `boolean`                          | `false` | If true, the position won't be animated.                                    |
+| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public  | `PearlChainVerticalItemAttributes` | `null!` | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. |
 
 ## Slots
 

src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.ts

@@ -9,8 +9,9 @@ import style from './pearl-chain-vertical.scss?lit&inline';
  *
  * @slot - The unnamed slot is used for the `sbb-pearl-chain-vertical-item` component.
  */
+export
 @customElement('sbb-pearl-chain-vertical')
-export class SbbPearlChainVerticalElement extends LitElement {
+class SbbPearlChainVerticalElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   protected override render(): TemplateResult {