feat: add 'now' property instead of data-now attribute

src/components/calendar/calendar.e2e.ts

@@ -18,7 +18,7 @@ describe(`sbb-calendar with ${fixture.name}`, () => {
 
   beforeEach(async () => {
     element = await fixture(
-      html`<sbb-calendar data-now="1673348400000" selected="1673744400"></sbb-calendar>`,
+      html`<sbb-calendar now="1673348400000" selected="1673744400"></sbb-calendar>`,
       { modules: ['./calendar.ts'] },
     );
   });
@@ -326,7 +326,7 @@ describe(`sbb-calendar with ${fixture.name}`, () => {
   describe('navigation for year view', () => {
     beforeEach(async () => {
       element = await fixture(
-        html`<sbb-calendar data-now="1673348400000" selected="1673744400"></sbb-calendar>`,
+        html`<sbb-calendar now="1673348400000" selected="1673744400"></sbb-calendar>`,
         { modules: ['./calendar.ts'] },
       );
 

src/components/calendar/calendar.spec.ts

@@ -8,11 +8,11 @@ import './calendar.js';
 describe(`sbb-calendar`, () => {
   it('renders', async () => {
     const root = await fixture(
-      html`<sbb-calendar selected="2023-01-20T00:00:00" data-now="1672790400000"></sbb-calendar>`,
+      html`<sbb-calendar selected="2023-01-20T00:00:00" now="1672790400000"></sbb-calendar>`,
     );
 
     expect(root).dom.to.be.equal(
-      `<sbb-calendar data-now="1672790400000" selected="2023-01-20T00:00:00"></sbb-calendar>`,
+      `<sbb-calendar now="1672790400000" selected="2023-01-20T00:00:00"></sbb-calendar>`,
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
@@ -54,7 +54,7 @@ describe(`sbb-calendar`, () => {
   });
 
   testA11yTreeSnapshot(
-    html`<sbb-calendar selected="2023-01-20T00:00:00" data-now="1672790400000"></sbb-calendar>`,
+    html`<sbb-calendar selected="2023-01-20T00:00:00" now="1672790400000"></sbb-calendar>`,
     undefined,
     { safari: true }, // We skip safari because it has an inconsistent behavior on ci environment
   );

src/components/calendar/calendar.stories.ts

@@ -84,7 +84,7 @@ const max: InputType = {
   },
 };
 
-const dataNow: InputType = {
+const now: InputType = {
   control: {
     type: 'date',
   },
@@ -124,7 +124,7 @@ const defaultArgTypes: ArgTypes = {
   min,
   max,
   dateFilter,
-  'data-now': dataNow,
+  now,
 };
 
 const today = new Date();

src/components/calendar/calendar.ts

@@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { isArrowKeyOrPageKeysPressed, sbbInputModalityDetector } from '../core/a11y.js';
 import { SbbConnectedAbortController, SbbLanguageController } from '../core/controllers.js';
-import { type DateAdapter, readDataNow } from '../core/datetime.js';
+import { type DateAdapter } from '../core/datetime.js';
 import {
   DAYS_PER_ROW,
   defaultDateAdapter,
@@ -141,6 +141,9 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   /** A function used to filter out dates. */
   @property({ attribute: 'date-filter' }) public dateFilter?: (date: T | null) => boolean;
 
+  /** A specific date for the current datetime (timestamp in milliseconds). */
+  @property({ attribute: 'now' }) public dataNow?: number;
+
   private _dateAdapter: DateAdapter<T> = defaultDateAdapter as unknown as DateAdapter<T>;
 
   /** Event emitted on date selection. */
@@ -796,8 +799,8 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   }
 
   private _now(): T {
-    if (this.hasAttribute('data-now')) {
-      const today = new Date(readDataNow(this));
+    if (this.dataNow) {
+      const today = new Date(+this.dataNow);
       if (defaultDateAdapter.isValid(today)) {
         return this._dateAdapter.createDate(
           today.getFullYear(),

src/components/calendar/readme.md

@@ -20,6 +20,9 @@ It's recommended to set the time to 00:00:00.
 <sbb-calendar min="1600000000" max="1700000000" selected="1650000000"></sbb-calendar>
 ```
 
+To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds).
+This is helpful if you need a specific state of the component.
+
 ## Style
 
 The component displays one month by default; two months can be displayed setting the `wide` property to `true`.
@@ -55,17 +58,13 @@ It's possible to move within the component using the keyboard.
 
 For accessibility purposes, the component is rendered as a native table element and each day is a button.
 
-## Testing
-
-To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
-This is helpful if you need a specific state of the component.
-
 <!-- Auto Generated Below -->
 
 ## Properties
 
 | Name         | Attribute     | Privacy | Type                                        | Default | Description                                                                                                  |
 | ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
+| `dataNow`    | `now`         | public  | `number \| undefined`                       |         | A specific date for the current datetime (timestamp in milliseconds).                                        |
 | `dateFilter` | `date-filter` | public  | `(date: T \| null) => boolean \| undefined` |         | A function used to filter out dates.                                                                         |
 | `max`        | `max`         | public  | `T \| null`                                 |         | The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |
 | `min`        | `min`         | public  | `T \| null`                                 |         | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). |

src/components/clock/clock.spec.ts

@@ -18,7 +18,7 @@ describe(`sbb-clock`, () => {
   });
 
   it('renders with a fixed time', async () => {
-    element = await fixture(html`<sbb-clock data-now="1674732600000"></sbb-clock>`);
+    element = await fixture(html`<sbb-clock now="1674732600000"></sbb-clock>`);
     assert.instanceOf(element, SbbClockElement);
 
     expect(element).to.have.attribute('data-initialized');

src/components/clock/clock.stories.ts

@@ -21,14 +21,14 @@ const Template = (args: Args): TemplateResult => html`<sbb-clock ${sbbSpread(arg
 
 export const Default: StoryObj = {
   render: Template,
-  argTypes: { 'data-now': dataNow },
-  args: { 'data-now': undefined },
+  argTypes: { now: dataNow },
+  args: { now: undefined },
 };
 
 export const Paused: StoryObj = {
   render: Template,
-  argTypes: { 'data-now': dataNow },
-  args: { 'data-now': new Date('2023-01-24T10:10:30+01:00').valueOf() },
+  argTypes: { now: dataNow },
+  args: { now: new Date('2023-01-24T10:10:30+01:00').valueOf() },
 };
 
 /**
@@ -37,7 +37,7 @@ export const Paused: StoryObj = {
  */
 if (isChromatic()) {
   Default.args = {
-    'data-now': new Date('2023-01-24T10:10:30+01:00').valueOf(),
+    now: new Date('2023-01-24T10:10:30+01:00').valueOf(),
   };
 }
 

src/components/clock/clock.ts

@@ -1,10 +1,8 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { readDataNow } from '../core/datetime.js';
-
 import clockFaceSVG from './assets/sbb_clock_face.svg?raw';
 import clockHandleHoursSVG from './assets/sbb_clock_hours.svg?raw';
 import clockHandleMinutesSVG from './assets/sbb_clock_minutes.svg?raw';
@@ -53,6 +51,9 @@
 export class SbbClockElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
+  /** A specific date for the current datetime (timestamp in milliseconds). */
+  @property({ attribute: 'now' }) public dataNow?: number;
+
   /** Reference to the hour hand. */
   private _clockHandHours!: HTMLElement;
 
@@ -83,7 +84,7 @@
   private async _handlePageVisibilityChange(): Promise<void> {
     if (document.visibilityState === 'hidden') {
       this._stopClock();
-    } else if (!this._hasDataNow()) {
+    } else if (!this.dataNow) {
       await this._startClock();
     }
   }
@@ -218,7 +219,7 @@
   private _stopClock(): void {
     clearInterval(this._handMovement);
 
-    if (this._hasDataNow()) {
+    if (this.dataNow) {
       this._setHandsStartingPosition();
       this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute');
       this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour');
@@ -253,13 +254,9 @@
     );
   }
 
-  private _hasDataNow(): boolean {
-    return this.hasAttribute('data-now');
-  }
-
   private _now(): Date {
-    if (this._hasDataNow()) {
-      return new Date(readDataNow(this));
+    if (this.dataNow) {
+      return new Date(+this.dataNow);
     }
     return new Date();
   }
@@ -269,7 +266,7 @@
 
     this._addEventListeners();
 
-    if (this._hasDataNow()) {
+    if (this.dataNow) {
       this._stopClock();
     } else {
       await this._startClock();

src/components/clock/readme.md

@@ -7,9 +7,17 @@ then it briefly pauses at the clock top before starting a new rotation.
 <sbb-clock></sbb-clock>
 ```
 
-## Testing
-
-To specify a specific date for the current datetime, you can use the `data-now` attribute (timestamp in milliseconds).
+To specify a specific date for the current datetime, you can use the `now` property (timestamp in milliseconds).
 This is helpful if you need a specific state of the component.
 
+```html
+<sbb-clock now="1715843833451"></sbb-clock>
+```
+
 <!-- Auto Generated Below -->
+
+## Properties
+
+| Name      | Attribute | Privacy | Type                  | Default | Description                                                           |
+| --------- | --------- | ------- | --------------------- | ------- | --------------------------------------------------------------------- |
+| `dataNow` | `now`     | public  | `number \| undefined` |         | A specific date for the current datetime (timestamp in milliseconds). |

src/components/core/datetime.ts

@@ -1,4 +1,3 @@
-export * from './datetime/data-now.js';
 export * from './datetime/date-adapter.js';
 export * from './datetime/date-helper.js';
 export * from './datetime/native-date-adapter.js';

src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts

@@ -44,7 +44,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html`
     <sbb-datepicker
       id="datepicker"
       input="datepicker-input"
-      data-now=${new Date(2023, 0, 12, 0, 0, 0).valueOf()}
+      now=${new Date(2023, 0, 12, 0, 0, 0).valueOf()}
     ></sbb-datepicker>
     <input value="15.02.2023" id="datepicker-input" />
     ${BaseTemplate(args, 'datepicker')}

src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts

@@ -49,7 +49,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html`
     <sbb-datepicker
       id="datepicker"
       input="datepicker-input"
-      data-now=${new Date(2023, 0, 12, 0, 0, 0).valueOf()}
+      now=${new Date(2023, 0, 12, 0, 0, 0).valueOf()}
     ></sbb-datepicker>
   </div>
 `;

src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts

@@ -69,7 +69,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html`
     <sbb-datepicker
       id="datepicker"
       input="datepicker-input"
-      data-now=${isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : nothing}
+      now=${isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : nothing}
     ></sbb-datepicker>
     <input id="datepicker-input" />
   </div>
@@ -79,7 +79,7 @@ const FormFieldTemplate = ({ negative, ...args }: Args): TemplateResult => html`
   <sbb-form-field ?negative=${negative}>
     <input />
     <sbb-datepicker
-      data-now=${isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : nothing}
+      now=${isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : nothing}
     ></sbb-datepicker>
     ${StandaloneTemplate(args)}
   </sbb-form-field>

src/components/datepicker/datepicker-toggle/datepicker-toggle.ts

@@ -6,7 +6,6 @@
 import type { SbbCalendarElement } from '../../calendar.js';
 import { sbbInputModalityDetector } from '../../core/a11y.js';
 import { SbbLanguageController } from '../../core/controllers.js';
-import { readDataNow } from '../../core/datetime.js';
 import { hostAttributes } from '../../core/decorators.js';
 import { i18nShowCalendar } from '../../core/i18n.js';
 import { SbbNegativeMixin } from '../../core/mixins.js';
@@ -157,8 +156,8 @@
   }
 
   private _now(): Date | undefined {
-    if (this._datePickerElement?.hasAttribute('data-now')) {
-      const today = new Date(readDataNow(this._datePickerElement));
+    if (this._datePickerElement?.dataNow) {
+      const today = new Date(+this._datePickerElement?.dataNow);
       today.setHours(0, 0, 0, 0);
       return today;
     }
@@ -192,7 +191,7 @@
         ${ref((el?: Element) => (this._popoverElement = el as SbbPopoverElement))}
       >
         <sbb-calendar
-          data-now=${this._now()?.valueOf() || nothing}
+          now=${this._now()?.valueOf() || nothing}
           .min=${this._min}
           .max=${this._max}
           ?wide=${this._datePickerElement?.wide}

src/components/datepicker/datepicker/datepicker.stories.ts

@@ -217,7 +217,7 @@ const borderless: InputType = {
   },
 };
 
-const dataNow: InputType = {
+const now: InputType = {
   control: {
     type: 'date',
   },
@@ -237,8 +237,8 @@ const basicArgTypes: ArgTypes = {
   wide,
   dateFilter,
   dateHandling,
+  now,
   'aria-label': ariaLabel,
-  'data-now': dataNow,
 };
 
 const basicArgs: Args = {
@@ -252,8 +252,8 @@ const basicArgs: Args = {
   wide: false,
   dateFilter: dateFilter.options![0],
   dateHandling: dateHandling.options![0],
+  now: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
   'aria-label': undefined,
-  dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
 };
 
 const formFieldBasicArgsTypes: ArgTypes = {
@@ -311,14 +311,7 @@ const changeEventHandler = async (event: Event): Promise<void> => {
   document.getElementById('container-value')?.append(div);
 };
 
-const Template = ({
-  min,
-  max,
-  wide,
-  dateFilter,
-  'data-now': dataNow,
-  ...args
-}: Args): TemplateResult => {
+const Template = ({ min, max, wide, dateFilter, now, ...args }: Args): TemplateResult => {
   return html`
     <div style=${styleMap({ display: 'flex', gap: '0.25rem' })}>
       <sbb-datepicker-previous-day date-picker="datepicker"></sbb-datepicker-previous-day>
@@ -330,7 +323,7 @@ const Template = ({
         .dateFilter=${dateFilter}
         ?wide=${wide}
         @change=${(event: Event) => changeEventHandler(event)}
-        data-now=${dataNow}
+        now=${now}
       ></sbb-datepicker>
       <sbb-datepicker-next-day date-picker="datepicker"></sbb-datepicker-next-day>
     </div>
@@ -354,7 +347,7 @@ const TemplateFormField = ({
   wide,
   dateFilter,
   dateHandling,
-  'data-now': dataNow,
+  now,
   ...args
 }: Args): TemplateResult => {
   return html`
@@ -376,7 +369,7 @@ const TemplateFormField = ({
         .format=${dateHandling.format}
         ?wide=${wide}
         @change=${(event: Event) => changeEventHandler(event)}
-        data-now=${dataNow}
+        now=${now}
       ></sbb-datepicker>
     </sbb-form-field>
     <div