Merge branch 'refs/heads/main' into feat/radio-button-form-native

sbb-design-systems · Oct 21, 2024 · 5331b3d · 5331b3d
2 parents 4c28844 + e61bca5
commit 5331b3d
Show file tree

Hide file tree

Showing 314 changed files with 2,747 additions and 1,792 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
   "last-release-sha": "fed492ab6cb4e807cffcb07e26bf25ab585f1c6b",
-  ".": "1.12.1"
+  ".": "1.13.0"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.13.0](https://github.com/sbb-design-systems/lyne-components/compare/v1.12.1...v1.13.0) (2024-10-21)
+
+
+### Features
+
+* **sbb-file-selector:** implement native form support ([#3085](https://github.com/sbb-design-systems/lyne-components/issues/3085)) ([449ee6d](https://github.com/sbb-design-systems/lyne-components/commit/449ee6d27667dcd944a4f17c6b91da0a1d250534))
+* **sbb-header:** introduce active state ([#3154](https://github.com/sbb-design-systems/lyne-components/issues/3154)) ([ffdeec4](https://github.com/sbb-design-systems/lyne-components/commit/ffdeec4e6d844b4af5b521c0af3742df207c0f1d))
+* **sbb-paginator:** add disabled property ([#3130](https://github.com/sbb-design-systems/lyne-components/issues/3130)) ([d43f64c](https://github.com/sbb-design-systems/lyne-components/commit/d43f64c3b306633fd1c663c81e7fc7336dbe1cf3))
+* **sbb-select:** implement native form support ([#3101](https://github.com/sbb-design-systems/lyne-components/issues/3101)) ([b9156ab](https://github.com/sbb-design-systems/lyne-components/commit/b9156ab70ffe14d543606194df305f9e7d4a1375))
+
+
+### Bug Fixes
+
+* **sbb-loading-indicator:** center component into his box ([#3144](https://github.com/sbb-design-systems/lyne-components/issues/3144)) ([22978f6](https://github.com/sbb-design-systems/lyne-components/commit/22978f6776598c7a457adcee4e9665229550caed))
+* **sbb-teaser:** css variable typo ([#3143](https://github.com/sbb-design-systems/lyne-components/issues/3143)) ([d3e4fb3](https://github.com/sbb-design-systems/lyne-components/commit/d3e4fb3c527059574195cf58686ca6bf3a599cdc))
+
 ## [1.12.1](https://github.com/sbb-design-systems/lyne-components/compare/v1.12.0...v1.12.1) (2024-10-03)
 
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -171,8 +171,6 @@ export default [
           },
         },
       ],
-      // TODO: Activate with standard decorators
-      'lyne/property-decorator-accessor-rule': 'off',
     },
   },
   {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -76,30 +76,30 @@
     "@custom-elements-manifest/analyzer": "0.10.3",
     "@custom-elements-manifest/to-markdown": "0.1.0",
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.12.0",
+    "@eslint/js": "9.13.0",
     "@lit-labs/observers": "2.0.4",
     "@lit-labs/router": "0.1.3",
     "@lit-labs/testing": "0.2.5",
     "@lit/react": "1.0.6",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "1.2.1",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-actions": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/manager-api": "8.3.5",
-    "@storybook/preview-api": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@storybook/theming": "8.3.5",
-    "@storybook/types": "8.3.5",
-    "@storybook/web-components": "8.3.5",
-    "@storybook/web-components-vite": "8.3.5",
+    "@sbb-esta/lyne-design-tokens": "1.3.0",
+    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-actions": "8.3.6",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/manager-api": "8.3.6",
+    "@storybook/preview-api": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@storybook/theming": "8.3.6",
+    "@storybook/types": "8.3.6",
+    "@storybook/web-components": "8.3.6",
+    "@storybook/web-components-vite": "8.3.6",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.9",
-    "@types/node": "20.16.12",
+    "@types/node": "20.16.13",
     "@types/react": "18.3.11",
     "@typescript-eslint/eslint-plugin": "8.10.0",
     "@typescript-eslint/parser": "8.10.0",
@@ -111,7 +111,7 @@
     "custom-elements-manifest": "2.1.0",
     "date-fns": "4.1.0",
     "esbuild": "0.24.0",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import-x": "4.3.1",
@@ -131,22 +131,23 @@
     "prettier": "3.3.3",
     "react": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.80.2",
+    "sass": "1.80.3",
     "sinon": "19.0.2",
-    "storybook": "8.3.5",
+    "storybook": "8.3.6",
     "stylelint": "16.10.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.8.1",
     "ts-lit-plugin": "2.0.2",
+    "tslib": "2.8.0",
     "typescript": "5.6.3",
     "typescript-eslint": "8.10.0",
     "urlpattern-polyfill": "10.0.0",
     "vite": "5.4.9",
     "vite-plugin-dts": "4.2.4"
   },
   "resolutions": {
-    "@types/node": "20.16.12",
+    "@types/node": "20.16.13",
     "@webcomponents/template-shadowroot": "0.2.1",
     "@web/dev-server-core": "0.7.1",
     "jackspeak": "2.1.1",
@@ -161,7 +162,7 @@
   },
   "lint-staged": {
     "*.{js,ts,yaml,yml}": [
-      "eslint --fix"
+      "eslint --fix --no-ignore"
     ],
     "*.scss": [
       "stylelint --fix"

diff --git a/src/elements-experimental/journey-summary/journey-summary.ts b/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;
+  @forceType()
+  @property({ attribute: 'round-trip', type: 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;
+  @forceType()
+  @property({ attribute: 'disable-animation', type: 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;
+  @forceType()
+  @property({ attribute: 'a11y-footpath', type: 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()

diff --git a/src/elements-experimental/journey-summary/readme.md b/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
 

diff --git a/src/elements-experimental/package.json b/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": "0.0.0-TSLIB"
   },
   "publishConfig": {
     "access": "public"

diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.ts b/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,40 @@ 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;
+  @forceType()
+  @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;
+  @forceType()
+  @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;
+  @forceType()
+  @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;
+  @forceType()
+  @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;
+  @forceType()
+  @property({ attribute: 'disable-animation', type: 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;
+  @forceType()
+  @property({ attribute: 'a11y-footpath', type: 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()