@sbb-esta/lyne-elements-dev 4.7.0-dev.1773817408 → 4.7.0-dev.1773821763

package/core/styles/core.scss

@@ -147,6 +147,12 @@ $theme: 'standard' !default;
 @use '../../map-container/map-container.global' as map-container with (
   $theme: $theme
 );
+@use '../../menu/menu/menu.global' as menu with (
+  $theme: $theme
+);
+@use '../../menu/common/menu-action.global' as menu-action with (
+  $theme: $theme
+);
 @use '../../message/message.global' as message with (
   $theme: $theme
 );
@@ -245,6 +251,8 @@ $theme: 'standard' !default;
   @include loading-indicator-circle.base;
   @include logo.base;
   @include map-container.base;
+  @include menu.base;
+  @include menu-action.base;
   @include message.base;
   @include mini-calendar-day.base;
   @include mini-calendar-month.base;
@@ -347,6 +355,7 @@ $theme: 'standard' !default;
     @include flip-card.base-breakpoint-large;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
+    @include menu.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage

package/core.css

@@ -1509,6 +1509,23 @@ slot[name=error]::slotted(*) {
   --sbb-map-container-sidebar-width: 25rem;
   --sbb-map-container-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
+  --sbb-menu-animation-easing: ease;
+  --sbb-menu-max-width: 100%;
+  --sbb-menu-min-width: 100%;
+  --sbb-menu-container-height: 100dvh;
+  --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
+  --sbb-menu-min-height: 3.03125rem;
+  --sbb-menu-border-radius: var(--sbb-border-radius-4x);
+  --sbb-menu-color: var(--sbb-color-2-inverted);
+  --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
+  --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-menu-action-color: var(--sbb-color-2-inverted);
+  --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-menu-action-forced-color-border-color: CanvasText;
   --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
   --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
@@ -1779,6 +1796,9 @@ slot[name=error]::slotted(*) {
     --_sbb-form-field-floating-label-transform: 0.65625rem;
     --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    --sbb-menu-max-width: 20rem;
+    --sbb-menu-min-width: 11.25rem;
+    --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);

package/custom-elements.json

@@ -131758,22 +131758,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "train/train-formation/train-formation.component.js",
+      "path": "train/train-wagon/train-wagon.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "It displays a train composition, acting as a container for one or more `sbb-train` component.",
-          "name": "SbbTrainFormationElement",
-          "cssProperties": [
-            {
-              "description": "Defines the inline padding inside the horizontal scrolling area.",
-              "name": "--sbb-train-formation-padding-inline",
-              "default": "0px"
-            }
-          ],
+          "description": "It displays a train compartment within a `sbb-train` component.",
+          "name": "SbbTrainWagonElement",
           "slots": [
             {
-              "description": "Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`.",
+              "description": "Use the unnamed slot to add one or more `sbb-icon` for meta-information of the `sbb-train-wagon`.",
               "name": ""
             }
           ],
@@ -131787,12 +131780,35 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'sbb-train-formation'",
+              "default": "'sbb-train-wagon'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "{ sectorchange: 'sectorchange', }",
+              "type": {
+                "text": "{\n    sectorchange: 'sectorchange',\n  }"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "| 'wagon'\n    | 'wagon-end-left'\n    | 'wagon-end-right'\n    | 'couchette'\n    | 'sleeping'\n    | 'restaurant'\n    | 'locomotive'\n    | 'closed'"
+              },
+              "privacy": "public",
+              "default": "'wagon'",
+              "description": "Wagon type.\nFor `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.",
+              "attribute": "type",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "listChildLocalNames",
@@ -131802,7 +131818,7 @@
               "privacy": "protected",
               "readonly": true,
               "description": "A list of lower-cased tag names to match against. (e.g. `sbb-link`)",
-              "default": "['sbb-train']",
+              "default": "['sbb-icon']",
               "inheritedFrom": {
                 "name": "SbbNamedSlotListMixin",
                 "module": "core/mixins/named-slot-list-mixin.js"
@@ -131810,24 +131826,71 @@
             },
             {
               "kind": "field",
-              "name": "view",
+              "name": "occupancy",
               "type": {
-                "text": "'side' | 'top'"
+                "text": "SbbOccupancy | null"
               },
               "privacy": "public",
-              "default": "'side'",
-              "description": "Whether the view of the wagons is from side or top perspective.",
-              "attribute": "view",
+              "default": "null",
+              "description": "Occupancy of a wagon.",
+              "attribute": "occupancy"
+            },
+            {
+              "kind": "field",
+              "name": "sector",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "Sector in which the wagon stops.",
+              "attribute": "sector",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "_sectors",
+              "name": "blockedPassage",
               "type": {
-                "text": "AggregatedSector[]"
+                "text": "'previous' | 'next' | 'both' | 'none'"
               },
-              "privacy": "private",
-              "default": "[]"
+              "privacy": "public",
+              "default": "'none'",
+              "description": "Accessibility text for blocked passages of the wagon.",
+              "attribute": "blocked-passage"
+            },
+            {
+              "kind": "field",
+              "name": "wagonClass",
+              "type": {
+                "text": "'1' | '2' | null"
+              },
+              "privacy": "public",
+              "default": "null",
+              "description": "Class label",
+              "attribute": "wagon-class"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "Wagon number",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "additionalAccessibilityText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "Additional accessibility text which will be appended to the end.",
+              "attribute": "additional-accessibility-text"
             },
             {
               "kind": "field",
@@ -131837,22 +131900,23 @@
             },
             {
               "kind": "method",
-              "name": "_readSectors",
+              "name": "_sectorChanged",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "optional": true,
-                  "type": {
-                    "text": "Event"
-                  }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_typeLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
                 }
-              ]
+              }
             },
             {
               "kind": "field",
@@ -132054,13 +132118,67 @@
           ],
           "attributes": [
             {
-              "name": "view",
+              "name": "type",
               "type": {
-                "text": "'side' | 'top'"
+                "text": "| 'wagon'\n    | 'wagon-end-left'\n    | 'wagon-end-right'\n    | 'couchette'\n    | 'sleeping'\n    | 'restaurant'\n    | 'locomotive'\n    | 'closed'"
               },
-              "default": "'side'",
-              "description": "Whether the view of the wagons is from side or top perspective.",
-              "fieldName": "view"
+              "default": "'wagon'",
+              "description": "Wagon type.\nFor `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.",
+              "fieldName": "type"
+            },
+            {
+              "name": "occupancy",
+              "type": {
+                "text": "SbbOccupancy | null"
+              },
+              "default": "null",
+              "description": "Occupancy of a wagon.",
+              "fieldName": "occupancy"
+            },
+            {
+              "name": "sector",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Sector in which the wagon stops.",
+              "fieldName": "sector"
+            },
+            {
+              "name": "blocked-passage",
+              "type": {
+                "text": "'previous' | 'next' | 'both' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Accessibility text for blocked passages of the wagon.",
+              "fieldName": "blockedPassage"
+            },
+            {
+              "name": "wagon-class",
+              "type": {
+                "text": "'1' | '2' | null"
+              },
+              "default": "null",
+              "description": "Class label",
+              "fieldName": "wagonClass"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Wagon number",
+              "fieldName": "label"
+            },
+            {
+              "name": "additional-accessibility-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Additional accessibility text which will be appended to the end.",
+              "fieldName": "additionalAccessibilityText"
             }
           ],
           "mixins": [
@@ -132073,32 +132191,39 @@
             "name": "SbbElement",
             "module": "core/base-elements.js"
           },
-          "tagName": "sbb-train-formation",
+          "tagName": "sbb-train-wagon",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SbbTrainFormationElement",
+          "name": "SbbTrainWagonElement",
           "declaration": {
-            "name": "SbbTrainFormationElement",
-            "module": "train/train-formation/train-formation.component.js"
+            "name": "SbbTrainWagonElement",
+            "module": "train/train-wagon/train-wagon.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "train/train-wagon/train-wagon.component.js",
+      "path": "train/train-formation/train-formation.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "It displays a train compartment within a `sbb-train` component.",
-          "name": "SbbTrainWagonElement",
+          "description": "It displays a train composition, acting as a container for one or more `sbb-train` component.",
+          "name": "SbbTrainFormationElement",
+          "cssProperties": [
+            {
+              "description": "Defines the inline padding inside the horizontal scrolling area.",
+              "name": "--sbb-train-formation-padding-inline",
+              "default": "0px"
+            }
+          ],
           "slots": [
             {
-              "description": "Use the unnamed slot to add one or more `sbb-icon` for meta-information of the `sbb-train-wagon`.",
+              "description": "Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`.",
               "name": ""
             }
           ],
@@ -132112,35 +132237,12 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'sbb-train-wagon'",
+              "default": "'sbb-train-formation'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "default": "{ sectorchange: 'sectorchange', }",
-              "type": {
-                "text": "{\n    sectorchange: 'sectorchange',\n  }"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "| 'wagon'\n    | 'wagon-end-left'\n    | 'wagon-end-right'\n    | 'couchette'\n    | 'sleeping'\n    | 'restaurant'\n    | 'locomotive'\n    | 'closed'"
-              },
-              "privacy": "public",
-              "default": "'wagon'",
-              "description": "Wagon type.\nFor `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.",
-              "attribute": "type",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "listChildLocalNames",
@@ -132150,7 +132252,7 @@
               "privacy": "protected",
               "readonly": true,
               "description": "A list of lower-cased tag names to match against. (e.g. `sbb-link`)",
-              "default": "['sbb-icon']",
+              "default": "['sbb-train']",
               "inheritedFrom": {
                 "name": "SbbNamedSlotListMixin",
                 "module": "core/mixins/named-slot-list-mixin.js"
@@ -132158,71 +132260,24 @@
             },
             {
               "kind": "field",
-              "name": "occupancy",
-              "type": {
-                "text": "SbbOccupancy | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "description": "Occupancy of a wagon.",
-              "attribute": "occupancy"
-            },
-            {
-              "kind": "field",
-              "name": "sector",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "Sector in which the wagon stops.",
-              "attribute": "sector",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "blockedPassage",
-              "type": {
-                "text": "'previous' | 'next' | 'both' | 'none'"
-              },
-              "privacy": "public",
-              "default": "'none'",
-              "description": "Accessibility text for blocked passages of the wagon.",
-              "attribute": "blocked-passage"
-            },
-            {
-              "kind": "field",
-              "name": "wagonClass",
-              "type": {
-                "text": "'1' | '2' | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "description": "Class label",
-              "attribute": "wagon-class"
-            },
-            {
-              "kind": "field",
-              "name": "label",
+              "name": "view",
               "type": {
-                "text": "string"
+                "text": "'side' | 'top'"
               },
               "privacy": "public",
-              "default": "''",
-              "description": "Wagon number",
-              "attribute": "label",
+              "default": "'side'",
+              "description": "Whether the view of the wagons is from side or top perspective.",
+              "attribute": "view",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "additionalAccessibilityText",
+              "name": "_sectors",
               "type": {
-                "text": "string"
+                "text": "AggregatedSector[]"
               },
-              "privacy": "public",
-              "default": "''",
-              "description": "Additional accessibility text which will be appended to the end.",
-              "attribute": "additional-accessibility-text"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -132232,23 +132287,22 @@
             },
             {
               "kind": "method",
-              "name": "_sectorChanged",
+              "name": "_readSectors",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_typeLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "Event"
+                  }
                 }
-              }
+              ]
             },
             {
               "kind": "field",
@@ -132450,67 +132504,13 @@
           ],
           "attributes": [
             {
-              "name": "type",
-              "type": {
-                "text": "| 'wagon'\n    | 'wagon-end-left'\n    | 'wagon-end-right'\n    | 'couchette'\n    | 'sleeping'\n    | 'restaurant'\n    | 'locomotive'\n    | 'closed'"
-              },
-              "default": "'wagon'",
-              "description": "Wagon type.\nFor `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.",
-              "fieldName": "type"
-            },
-            {
-              "name": "occupancy",
-              "type": {
-                "text": "SbbOccupancy | null"
-              },
-              "default": "null",
-              "description": "Occupancy of a wagon.",
-              "fieldName": "occupancy"
-            },
-            {
-              "name": "sector",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Sector in which the wagon stops.",
-              "fieldName": "sector"
-            },
-            {
-              "name": "blocked-passage",
-              "type": {
-                "text": "'previous' | 'next' | 'both' | 'none'"
-              },
-              "default": "'none'",
-              "description": "Accessibility text for blocked passages of the wagon.",
-              "fieldName": "blockedPassage"
-            },
-            {
-              "name": "wagon-class",
-              "type": {
-                "text": "'1' | '2' | null"
-              },
-              "default": "null",
-              "description": "Class label",
-              "fieldName": "wagonClass"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Wagon number",
-              "fieldName": "label"
-            },
-            {
-              "name": "additional-accessibility-text",
+              "name": "view",
               "type": {
-                "text": "string"
+                "text": "'side' | 'top'"
               },
-              "default": "''",
-              "description": "Additional accessibility text which will be appended to the end.",
-              "fieldName": "additionalAccessibilityText"
+              "default": "'side'",
+              "description": "Whether the view of the wagons is from side or top perspective.",
+              "fieldName": "view"
             }
           ],
           "mixins": [
@@ -132523,17 +132523,17 @@
             "name": "SbbElement",
             "module": "core/base-elements.js"
           },
-          "tagName": "sbb-train-wagon",
+          "tagName": "sbb-train-formation",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SbbTrainWagonElement",
+          "name": "SbbTrainFormationElement",
           "declaration": {
-            "name": "SbbTrainWagonElement",
-            "module": "train/train-wagon/train-wagon.component.js"
+            "name": "SbbTrainFormationElement",
+            "module": "train/train-formation/train-formation.component.js"
           }
         }
       ]

package/development/menu/common/menu-action-common.js

@@ -1,2 +1,2 @@
-import { t as SbbMenuActionCommonElementMixin } from "../../menu-action-common-BTOi6wCg.js";
+import { t as SbbMenuActionCommonElementMixin } from "../../menu-action-common-CE1gySL_.js";
 export { SbbMenuActionCommonElementMixin };

package/development/menu/common.js

@@ -1,4 +1,4 @@
-import { t as SbbMenuActionCommonElementMixin } from "../menu-action-common-BTOi6wCg.js";
+import { t as SbbMenuActionCommonElementMixin } from "../menu-action-common-CE1gySL_.js";
 //#region src/elements/menu/common.ts
 console.warn(`The entrypoint '@sbb-esta/elements/menu/common.js' has been deprecated.
 Use either '@sbb-esta/elements/menu.js' or '@sbb-esta/elements/menu.pure.js' instead.`);

package/development/menu/menu/menu.component.js

@@ -1,2 +1,2 @@
-import { t as SbbMenuElement } from "../../menu.component-Dt6ilHX4.js";
+import { t as SbbMenuElement } from "../../menu.component-D4nt6M9b.js";
 export { SbbMenuElement };

package/development/menu/menu.js

@@ -1,4 +1,4 @@
-import { t as SbbMenuElement } from "../menu.component-Dt6ilHX4.js";
+import { t as SbbMenuElement } from "../menu.component-D4nt6M9b.js";
 //#region src/elements/menu/menu.ts
 /** @entrypoint */
 SbbMenuElement.define();