@sbb-esta/lyne-elements-experimental 4.0.0 → 4.0.2

package/seat-reservation/seat-reservation/seat-reservation.component.js

@@ -1,12 +1,12 @@
-import { __esDecorate as $, __runInitializers as y } from "tslib";
+import { __esDecorate as k, __runInitializers as y } from "tslib";
 import { SbbLanguageController as A } from "@sbb-esta/lyne-elements/core/controllers.js";
 import { boxSizingStyles as R } from "@sbb-esta/lyne-elements/core/styles.js";
-import { css as S, html as n, nothing as u } from "lit";
+import { css as S, html as n, nothing as _ } from "lit";
 import { customElement as E } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
+import { classMap as C } from "lit/directives/class-map.js";
 import { styleMap as v } from "lit/directives/style-map.js";
-import { getI18nSeatReservation as l } from "../common.js";
-import { SeatReservationBaseElement as T } from "./seat-reservation-base-element.js";
+import { getI18nSeatReservation as c } from "../common.js";
+import { SeatReservationBaseElement as N } from "./seat-reservation-base-element.js";
 import "@sbb-esta/lyne-elements/button.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "@sbb-esta/lyne-elements/popover.js";
@@ -15,11 +15,11 @@ import "../seat-reservation-graphic.js";
 import "../seat-reservation-place-control.js";
 import "../seat-reservation-navigation-coach.js";
 import "../seat-reservation-scoped.js";
-const N = S`:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media(forced-colors:active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}.sbb-sr__container{display:flex;height:inherit}.sbb-sr__grid{display:grid;grid-template-columns:20% 1fr 20%;grid-template-rows:auto auto}.sbb-sr__grid .sbb-sr-navigation-first-grid,.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-row-start:1;position:relative;margin-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__grid .sbb-sr-navigation-first-grid{grid-column:1/2}.sbb-sr__grid .sbb-sr-navigation-last-grid{grid-column:3/4}.sbb-sr__grid .sbb-sr__component{display:flex;grid-column:1/4;grid-row:1/3}.sbb-sr__grid .sbb-sr-grid-inner{display:grid;grid-template-columns:20% 60% 20%;grid-template-rows:auto 1fr;gap:0}.sbb-sr__grid .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:1/2;display:inherit}.sbb-sr__grid .sbb-sr-grid-inner .coaches-grid{grid-column:1/4;grid-row:2/3;display:inherit}.sbb-sr__navigation-control-button{position:absolute;z-index:10}.sbb-sr__navigation-control-button#first-tab-element{inset-inline-end:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__navigation-control-button#last-tab-element{inset-inline-start:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation-wrapper{overflow:hidden;padding-block:0 calc(32 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation::-webkit-scrollbar-button,.sbb-sr-navigation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation{padding-block-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation{--sbb-scrollbar-color: transparent;display:flex;overflow:scroll hidden;position:relative}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__wrapper::-webkit-scrollbar-button,.sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper{overflow-x:scroll;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-popover{margin:0}.sbb-sr-coach-wrapper__table{outline:0}:host([align-vertical]) .sbb-sr{grid-template-columns:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 1fr;grid-template-rows:20% 60% 20%}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-first-grid,:host([align-vertical]) .sbb-sr .sbb-sr-navigation-last-grid{margin-inline-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-start:0}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-first-grid{grid-column:2/3;grid-row-start:1}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-first-grid #first-tab-element{position:absolute;inset-block-end:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-end:initial;rotate:90deg}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-last-grid{grid-column:2/3;grid-row:3/4}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-last-grid #last-tab-element{inset-block-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));inset-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:90deg}:host([align-vertical]) .sbb-sr .sbb-sr-navigation-wrapper{padding-block-end:initial;padding-inline-start:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr .sbb-sr__component{grid-column:1/3;grid-row:1/4}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner{grid-template-columns:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 1fr;grid-template-rows:20% 60% 20%}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .nav-grid{grid-column:2/3;grid-row:2/3;height:100%}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation{display:block;overflow:hidden scroll;height:100%;padding-block-start:0;padding-inline-start:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .nav-grid .sbb-sr-navigation .sbb-sr-navigation__list-coaches{flex-direction:column;padding:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid{grid-column:1/2;grid-row:1/4;overflow:hidden;position:relative}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc(100% - 24 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{width:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:16px;rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-button,:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper{overflow:hidden scroll;height:100%;padding:0}:host([align-vertical]) .sbb-sr .sbb-sr-grid-inner .coaches-grid .sbb-sr__wrapper-coach-decks .sbb-sr__parent{rotate:90deg;transform-origin:calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc((var(--sbb-seat-reservation-height) + 24 - 24 - 6 * (var(--sbb-seat-reservation-decks) - 1)) / 2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}`;
+const T = S`:host{--sbb-seat-reservation-grid-size: 16px;--sbb-seat-reservation-height: 0;--sbb-seat-reservation-decks: 1;display:block;height:inherit}:host ::part(coach-floor){fill:var(--sbb-background-color-2)}@media(forced-colors:active){:host ::part(coach-floor){fill:transparent}}:host(:dir(rtl)) :not(.sbb-sr-place-ctrl--type-bicycle,.sbb-sr-place-ctrl--orientation-90,.sbb-sr-place-ctrl--orientation-270,.sbb-sr-place-ctrl--state-selected) ::part(coach-floor){rotate:180deg}[popover]:where(sbb-popover){margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent;color:inherit;pointer-events:none}[popover]:where(sbb-popover) .sbb-sr-popover{margin-block:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}:host([align-vertical]) .sbb-sr__component{flex-direction:row-reverse;justify-content:flex-end;gap:calc(22 * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:inherit}@media(min-width:37.5rem){:host([align-vertical]) .sbb-sr__component{gap:calc(54 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation,:host([align-vertical]) .sbb-sr__component ul.sbb-sr-navigation__list-coaches{flex-direction:column}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation{padding:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(1 * var(--sbb-seat-reservation-one-px-rem, .0625rem));top:0;rotate:90deg}@media(min-width:64rem){:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation .sbb-sr__navigation-control-button{left:calc(-1 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}}:host([align-vertical]) .sbb-sr__component nav.sbb-sr-navigation ul.sbb-sr-navigation__list-coaches{max-width:initial;padding:calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem));overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-coach-decks{flex-direction:column}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{flex-direction:column-reverse;width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:initial}:host([align-vertical]) .sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{inline-size:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));block-size:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-bottom:calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));rotate:initial;writing-mode:initial}:host([align-vertical]) .sbb-sr__wrapper-scrollarea{width:calc((var(--sbb-seat-reservation-height) + 24) * var(--sbb-seat-reservation-one-px-rem, .0625rem));height:100%;overflow:hidden scroll}:host([align-vertical]) .sbb-sr__wrapper-scrollarea .sbb-sr__parent{flex-direction:row;rotate:90deg}.sbb-sr-navigation{gap:calc(3 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr-navigation .sbb-sr__navigation-control-button{position:relative;top:calc(2 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}@media(min-width:64rem){.sbb-sr-navigation .sbb-sr__navigation-control-button{top:0}}.sbb-sr__component{display:flex;flex-direction:column;gap:calc(64 * var(--sbb-seat-reservation-one-px-rem, .0625rem) - 16px)}.sbb-sr-navigation-wrapper{display:flex}.sbb-sr-navigation{display:flex;justify-content:center;width:100%;padding-inline:16px}.sbb-sr-navigation__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr-navigation__list-coaches::-webkit-scrollbar-button,.sbb-sr-navigation__list-coaches::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr-navigation__list-coaches{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr-navigation__list-coaches{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem));padding:calc(6 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(5 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) 0;max-width:856px;--sbb-scrollbar-color: transparent;overflow:scroll hidden;position:relative}.sbb-sr__wrapper-coach-decks{display:flex;overflow:hidden;height:inherit}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels{display:flex;justify-content:space-between;height:calc(var(--sbb-seat-reservation-height) * var(--sbb-seat-reservation-one-px-rem, .0625rem));writing-mode:vertical-lr}.sbb-sr__wrapper-coach-decks .sbb-sr__wrapper-deck-labels b{height:calc(50% - 16 * var(--sbb-seat-reservation-one-px-rem, .0625rem));width:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem));margin-block-end:16px;rotate:180deg;text-align:center;line-height:calc(20 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-button,.sbb-sr__wrapper-scrollarea::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sr__wrapper-scrollarea{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sr__wrapper-scrollarea{overflow:scroll hidden;padding-block:calc(8 * var(--sbb-seat-reservation-one-px-rem, .0625rem)) calc(16 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__wrapper-scrollarea .sbb-sr__parent{display:flex;flex-direction:column;position:relative}.sbb-sr__list-decks{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column}.sbb-sr__list-decks--gap{gap:calc(48 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__list-item-deck{position:relative}.sbb-sr__list-coaches{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:calc(4 * var(--sbb-seat-reservation-one-px-rem, .0625rem))}.sbb-sr__item-coach{position:relative}.sbb-sr-coach-wrapper__table{outline:0}`;
 let X = (() => {
-  var h;
-  let C = [E("sbb-seat-reservation")], w, f = [], d, k = T;
-  return h = class extends k {
+  var d;
+  let $ = [E("sbb-seat-reservation")], f, w = [], h, x = N;
+  return d = class extends x {
     constructor() {
       super(...arguments), this._language = new A(this), this._notAreaElements = [
         "DRIVER_AREA",
@@ -31,11 +31,11 @@ let X = (() => {
         "COMPARTMENT_PASSAGE_LOW"
       ], this._notFixedRotatableAreaIcons = ["ENTRY_EXIT"];
     }
-    willUpdate(r) {
-      super.willUpdate(r), r.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((e) => e.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((e) => e.setAttribute("tabindex", "0")));
+    willUpdate(e) {
+      super.willUpdate(e), e.has("hasNavigation") && (this.hasNavigation ? this.shadowRoot?.querySelectorAll("table").forEach((r) => r.removeAttribute("tabindex")) : this.shadowRoot?.querySelectorAll("table").forEach((r) => r.setAttribute("tabindex", "0")));
     }
-    firstUpdated(r) {
-      super.firstUpdated(r), this.updateComplete.then(() => {
+    firstUpdated(e) {
+      super.firstUpdated(e), this.updateComplete.then(() => {
         this.initNavigationSelectionByScrollEvent();
       });
     }
@@ -44,103 +44,96 @@ let X = (() => {
     }
     _initVehicleSeatReservationConstruction() {
       this._coachesHtmlTemplate = n`
-      <div class="sbb-sr__container">
-        <div class="sbb-sr sbb-sr__grid">
-          <div class="sbb-sr-navigation-first-grid">
-            ${this._renderNavigationControlButton("DIRECTION_LEFT")}
-          </div>
+      <div class="sbb-sr__component">
+        ${this._renderNavigation()}
+        <div
+          class="sbb-sr__wrapper-coach-decks"
+          @keydown=${(e) => this.keyboardSeatmapEventHadling(e)}
+        >
+          <div class="sbb-sr__wrapper-deck-labels">${this._renderDeckLabels()}</div>
           <div
-            class="sbb-sr__component"
-            @keydown=${(r) => this.handleKeyboardEvent(r)}
+            @scroll=${() => this.coachAreaScrollend()}
+            id="sbb-sr__wrapper-scrollarea"
+            class="sbb-sr__wrapper-scrollarea"
+            tabindex="-1"
           >
-            <div class="sbb-sr-grid-inner">
-              <div class="nav-grid">${this._renderNavigation()}</div>
-              <div class="coaches-grid">
-                <div class="sbb-sr__wrapper-coach-decks">
-                  <div class="sbb-sr__wrapper-deck-labels">${this._renderDeckLabels()}</div>
-                  <div
-                    id="sbb-sr__wrapper-scrollarea"
-                    class="sbb-sr__wrapper"
-                    @scroll=${() => this.coachAreaScrollend()}
-                  >
-                    <div id="sbb-sr__parent-area" class="sbb-sr__parent" tabindex="-1">
-                      <ul
-                        class="${x({
+            <div id="sbb-sr__parent-area" class="sbb-sr__parent">
+              <ul
+                class="${C({
         "sbb-sr__list-decks": !0,
         "sbb-sr__list-decks--gap": this.hasMultipleDecks
       })}"
-                      >
-                        ${this.seatReservations?.map((r, e) => n`<li class="sbb-sr__list-item-deck">
-                              <ul class="sbb-sr__list-coaches" role="presentation">
-                                ${this._renderCoaches(r, e)}
-                              </ul>
-                            </li>`)}
+              >
+                ${this.seatReservations?.map((e, r) => n`<li class="sbb-sr__list-item-deck">
+                      <ul class="sbb-sr__list-coaches" role="presentation">
+                        ${this._renderCoaches(e, r)}
                       </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                    </li>`)}
+              </ul>
             </div>
           </div>
-          <div class="sbb-sr-navigation-last-grid">
-            ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
-          </div>
         </div>
       </div>
     `;
     }
     _renderDeckLabels() {
-      return this.hasMultipleDecks ? this.seatReservations.map((r) => {
-        const e = l(r.deckCoachLevel, this._language.current);
-        return n`<b aria-hidden="true">${e}</b>`;
+      return this.hasMultipleDecks ? this.seatReservations.map((e) => {
+        const r = c(e.deckCoachLevel, this._language.current);
+        return n`<b aria-hidden="true">${r}</b>`;
       }) : null;
     }
-    _renderNavigationControlButton(r) {
+    _renderNavigationControlButton(e) {
       if (!this.hasNavigation || !this.seatReservations)
         return null;
-      const e = r == "DIRECTION_RIGHT" ? "last-tab-element" : "first-tab-element", t = r == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", a = r == "DIRECTION_RIGHT" ? l("SEAT_RESERVATION_END", this._language.current) : l("SEAT_RESERVATION_BEGIN", this._language.current);
-      let s = !0;
-      return (r == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || r == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.seatReservations[this.currSelectedDeckIndex].coachItems.length - 1) && (s = !1), n`<sbb-secondary-button
-      @click="${() => this.navigateByDirectionBtn(r)}"
-      id="${e}"
-      class="sbb-sr__navigation-control-button"
-      size="s"
-      icon-name="${t}"
-      type="button"
-      aria-label="${a}"
-      role="contentinfo"
-      .disabledInteractive="${s || u}"
-    ></sbb-secondary-button>`;
+      const r = e == "DIRECTION_RIGHT" ? "sbb-sr-navigation__wrapper-button-direction--right" : "sbb-sr-navigation__wrapper-button-direction--left", s = e == "DIRECTION_RIGHT" ? "chevron-small-right-small" : "chevron-small-left-small", a = e == "DIRECTION_RIGHT" ? c("SEAT_RESERVATION_END", this._language.current) : c("SEAT_RESERVATION_BEGIN", this._language.current);
+      let t = !0;
+      return (e == "DIRECTION_LEFT" && this.selectedCoachIndex > 0 || e == "DIRECTION_RIGHT" && this.selectedCoachIndex < this.coachNavData.length - 1) && (t = !1), n`<div class="sbb-sr-navigation__wrapper-button-direction">
+      <sbb-secondary-button
+        @click="${() => this.navigateByDirectionBtn(e)}"
+        @focus="${() => this.onFocusNavDirectionButton()}"
+        id="${r}"
+        class="sbb-sr__navigation-control-button"
+        size="m"
+        icon-name="${s}"
+        type="button"
+        aria-label="${a}"
+        role="button"
+        .disabledInteractive="${t || _}"
+      ></sbb-secondary-button>
+    </div>`;
     }
     _renderNavigation() {
       return !this.hasNavigation || !this.seatReservations ? null : n`<div class="sbb-sr-navigation-wrapper">
       <nav id="sbb-sr-navigation" class="sbb-sr-navigation">
+        ${this._renderNavigationControlButton("DIRECTION_LEFT")}
         <ul
           id="sbb-sr__navigation-list-coaches"
           class="sbb-sr-navigation__list-coaches"
-          aria-label="${l("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
+          aria-label="${c("SEAT_RESERVATION_NAVIGATION", this._language.current)}"
         >
-          ${this.coachNavData.map((r, e) => n`<li>
+          ${this.coachNavData.map((e, r) => n`<li>
               <sbb-seat-reservation-navigation-coach
-                @selectcoach=${(t) => this._onSelectNavCoach(t)}
+                @selectcoach=${(s) => this._onSelectNavCoach(s)}
                 @focuscoach=${() => this._onFocusNavCoach()}
-                index="${e}"
-                coach-id="${r.id}"
-                .freePlacesByType="${r.freePlaces}"
-                .selected=${this.selectedCoachIndex === e}
-                .focused=${this.focusedCoachIndex === e}
-                .hovered=${this.hoveredScrollCoachIndex === e}
+                @keyup=${(s) => this.onKeyNavigationNavCoachButton(s, r)}
+                index="${r}"
+                coach-id="${e.id}"
+                .freePlacesByType="${e.freePlaces}"
+                .selected=${this.selectedCoachIndex === r}
+                .focused=${this.focusedCoachIndex === r}
+                .hovered=${this.hoveredCoachIndex === r}
                 .nativeFocusActive=${this.hasSeatReservationNativeFocus}
-                .propertyIds="${r.propertyIds}"
-                .travelClass="${r.travelClass}"
-                ?driver-area="${r.isDriverArea}"
-                ?first="${r?.driverAreaSide?.left}"
-                ?last="${r?.driverAreaSide?.right}"
+                .propertyIds="${e.propertyIds}"
+                .travelClass="${e.travelClass}"
+                ?driver-area="${e.isDriverArea}"
+                ?first="${e?.driverAreaSide?.left}"
+                ?last="${e?.driverAreaSide?.right}"
                 ?vertical="${this.alignVertical}"
               >
               </sbb-seat-reservation-navigation-coach>
             </li>`)}
         </ul>
+        ${this._renderNavigationControlButton("DIRECTION_RIGHT")}
       </nav>
     </div>`;
     }
@@ -150,36 +143,37 @@ let X = (() => {
      * @param seatReservation
      * @param coachDeckIndex
      */
-    _renderCoaches(r, e) {
-      const t = JSON.parse(JSON.stringify(r?.coachItems));
-      return t ? t.map((a, s) => n`
+    _renderCoaches(e, r) {
+      const s = JSON.parse(JSON.stringify(e?.coachItems));
+      return s ? s.map((a, t) => n`
         <li class="sbb-sr__item-coach">
-          ${this._renderCoachElement(a, s, e, r.deckCoachIndex)}
+          ${this._renderCoachElement(a, t, r, e.deckCoachIndex)}
         </li>
       `) : null;
     }
-    _renderCoachElement(r, e, t, a) {
-      const s = this.getCalculatedDimension(r.dimension), i = this._getDescriptionTableCoach(r);
+    _renderCoachElement(e, r, s, a) {
+      const t = this.getCalculatedDimension(e.dimension), o = this._getDescriptionTableCoach(e);
       return n`<sbb-seat-reservation-scoped
       style=${v({
-        "--sbb-seat-reservation-scoped-width": s.w,
-        "--sbb-seat-reservation-scoped-height": s.h
+        "--sbb-seat-reservation-scoped-width": t.w,
+        "--sbb-seat-reservation-scoped-height": t.h
       })}
     >
-      ${this._getRenderedCoachBorders(r)}
-      ${this._getRenderedGraphicalElements(r.graphicElements || [], r.dimension, e, t)}
-      ${this._getRenderedServiceElements(e, t, r.serviceElements)}
+      ${this._getRenderedCoachBorders(e)}
+      ${this._getRenderedGraphicalElements(e.graphicElements || [], e.dimension, r, s)}
+      ${this._getRenderedServiceElements(r, s, e.serviceElements)}
 
       <table
-        @focus=${() => this.onFocusTableCoachAndPreselectPlace(e)}
-        id="sbb-sr-coach-${e}"
+        @focus=${() => this.onFocusTableCoachAndPreselectPlace(r)}
+        id="sbb-sr-coach-${r}"
         class="sbb-sr-coach-wrapper__table"
-        aria-describedby="sbb-sr-coach-caption-${e}"
+        aria-describedby="sbb-sr-coach-caption-${r}"
+        tabindex="-1"
       >
-        <caption id="sbb-sr-coach-caption-${e}" tabindex="-1">
-          <sbb-screen-reader-only>${i}</sbb-screen-reader-only>
+        <caption id="sbb-sr-coach-caption-${r}" tabindex="-1">
+          <sbb-screen-reader-only>${o}</sbb-screen-reader-only>
         </caption>
-        ${this._getRenderedRowPlaces(r, e, t, a)}
+        ${this._getRenderedRowPlaces(e, r, s, a)}
       </table>
     </sbb-seat-reservation-scoped>`;
     }
@@ -187,17 +181,17 @@ let X = (() => {
      * @returns Returns the border graphic (COACH_BORDER_MIDDLE) of a coach with calculated border gap and coach width,
      * depending on whether the coach is with a driver area or without.
      */
-    _getRenderedCoachBorders(r) {
-      if (!r.graphicElements)
+    _getRenderedCoachBorders(e) {
+      if (!e.graphicElements)
         return null;
-      const e = 1, a = r.graphicElements?.find((b) => b.icon === "DRIVER_AREA"), s = a ? r.dimension.w - a.dimension.w - e : r.dimension.w - e * 2, i = (r.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, o = a && a.position.x === 0 ? a?.dimension.w * this.baseGridSize : this.baseGridSize;
+      const r = 1, a = e.graphicElements?.find((l) => l.icon === "DRIVER_AREA"), t = a ? e.dimension.w - a.dimension.w - r : e.dimension.w - r * 2, o = (e.dimension.h + this.coachBorderOffset * 2) * this.baseGridSize, i = a && a.position.x === 0 ? a?.dimension.w * this.baseGridSize : this.baseGridSize;
       return n`
       <sbb-seat-reservation-graphic
         style=${v({
-        "--sbb-seat-reservation-graphic-width": s * this.baseGridSize,
-        "--sbb-seat-reservation-graphic-height": i,
+        "--sbb-seat-reservation-graphic-width": t * this.baseGridSize,
+        "--sbb-seat-reservation-graphic-height": o,
         "--sbb-seat-reservation-graphic-top": this.coachBorderPadding * -1,
-        "--sbb-seat-reservation-graphic-left": o,
+        "--sbb-seat-reservation-graphic-left": i,
         "--sbb-seat-reservation-graphic-position": "absolute"
       })}
         name="COACH_BORDER_MIDDLE"
@@ -206,57 +200,57 @@ let X = (() => {
       ></sbb-seat-reservation-graphic>
     `;
     }
-    _getRenderedRowPlaces(r, e, t, a) {
-      if (!r.places)
+    _getRenderedRowPlaces(e, r, s, a) {
+      if (!e.places)
         return null;
-      const s = {};
-      for (const i of r.places)
-        s[i.position.y] ? s[i.position.y].push(i) : s[i.position.y] = [i];
-      return Object.values(s).map((i, o) => n`
-          <tr id="row-${e}-${i[0].position.y}" data-row-index=${o}>
-            ${this._getRenderedColumnPlaces(i, e, t, a)}
+      const t = {};
+      for (const o of e.places)
+        t[o.position.y] ? t[o.position.y].push(o) : t[o.position.y] = [o];
+      return Object.values(t).map((o, i) => n`
+          <tr id="row-${r}-${o[0].position.y}" data-row-index=${i}>
+            ${this._getRenderedColumnPlaces(o, r, s, a)}
           </tr>
-        `).flatMap((i) => i);
+        `).flatMap((o) => o);
     }
-    _getRenderedColumnPlaces(r, e, t, a) {
-      return r.sort((s, i) => Number(s.position.x) - Number(i.position.x)), r?.map((s, i) => {
-        const o = this.getCalculatedDimension(s.dimension), b = this.getCalculatedPosition(s.position), p = s.rotation || 0, c = this.alignVertical ? -90 : 0, g = this.getPlaceElementId(t, e, s.number);
+    _getRenderedColumnPlaces(e, r, s, a) {
+      return e.sort((t, o) => Number(t.position.x) - Number(o.position.x)), e?.map((t, o) => {
+        const i = this.getCalculatedDimension(t.dimension), l = this.getCalculatedPosition(t.position), p = t.rotation || 0, b = this.alignVertical ? -90 : 0, u = this.getPlaceElementId(s, r, t.number);
         return n`
         <td
-          id="cell-${t}-${e}-${s.position.y}-${i}"
+          id="cell-${s}-${r}-${t.position.y}-${o}"
           class="graphical-element"
         >
           <sbb-seat-reservation-place-control
             style=${v({
-          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(o.w, o.h),
-          "--sbb-seat-reservation-place-control-width": o.w,
-          "--sbb-seat-reservation-place-control-height": o.h,
-          "--sbb-seat-reservation-place-control-top": b.y,
-          "--sbb-seat-reservation-place-control-left": b.x,
+          "--sbb-seat-reservation-place-control-text-scale-value": Math.min(i.w, i.h),
+          "--sbb-seat-reservation-place-control-width": i.w,
+          "--sbb-seat-reservation-place-control-height": i.h,
+          "--sbb-seat-reservation-place-control-top": l.y,
+          "--sbb-seat-reservation-place-control-left": l.x,
           "--sbb-seat-reservation-place-control-rotation": p,
-          "--sbb-seat-reservation-place-control-text-rotation": c
+          "--sbb-seat-reservation-place-control-text-rotation": b
         })}
-            @selectplace=${(_) => this._onSelectPlace(_)}
+            @selectplace=${(g) => this._onSelectPlace(g)}
             exportparts="sbb-sr-place-part"
-            id=${g}
+            id=${u}
             class="seat-reservation-place-control"
-            text=${s.number}
-            type=${s.type}
-            state=${s.state}
-            coach-index=${e}
+            text=${t.number}
+            type=${t.type}
+            state=${t.state}
+            coach-index=${r}
             deck-index=${a}
-            data-deck-index=${t}
-            .propertyIds=${s.propertyIds}
+            data-deck-index=${s}
+            .propertyIds=${t.propertyIds}
             .preventClick=${this.preventPlaceClick}
           ></sbb-seat-reservation-place-control>
         </td>
       `;
       });
     }
-    _getRenderedGraphicalElements(r, e, t, a) {
-      return r ? r?.map((s) => {
-        const i = s.icon ?? "", o = s.rotation || 0, b = this._notFixedRotatableAreaIcons.indexOf(s.icon) === -1, p = this.alignVertical && b ? o - 90 : o;
-        return this._notAreaElements.findIndex((c) => c === i) > -1 ? this._getRenderElementWithoutArea(s, o, e) : this._getRenderElementWithArea(s, p, e, t, a);
+    _getRenderedGraphicalElements(e, r, s, a) {
+      return e ? e?.map((t) => {
+        const o = t.icon ?? "", i = t.rotation || 0, l = this._notFixedRotatableAreaIcons.indexOf(t.icon) === -1, p = this.alignVertical && l ? i - 90 : i;
+        return this._notAreaElements.findIndex((b) => b === o) > -1 ? this._getRenderElementWithoutArea(t, i, r) : this._getRenderElementWithArea(t, p, r, s, a);
       }) : null;
     }
     /**
@@ -268,76 +262,76 @@ let X = (() => {
      * @param coachDeckIndex used to generate a unique id
      * @private
      */
-    _getRenderElementWithArea(r, e, t, a, s) {
-      const i = r.icon?.indexOf("TABLE") === -1, o = r.icon && i ? r.icon : null, b = this.isElementDirectlyOnBorder(r, t) && o !== "ENTRY_EXIT", p = r.icon ? l(r.icon, this._language.current) : u, c = this.getCalculatedDimension(r.dimension, t, !0, b), g = this.getCalculatedPosition(r.position, r.dimension, t, !0), _ = `popover-trigger-${s}-${a}-${g.x}-${g.y}`;
+    _getRenderElementWithArea(e, r, s, a, t) {
+      const o = e.icon?.indexOf("TABLE") === -1, i = e.icon && o ? e.icon : null, l = this.isElementDirectlyOnBorder(e, s) && i !== "ENTRY_EXIT", p = e.icon ? c(e.icon, this._language.current) : _, b = this.getCalculatedDimension(e.dimension, s, !0, l), u = this.getCalculatedPosition(e.position, e.dimension, s, !0), g = `popover-trigger-${t}-${a}-${u.x}-${u.y}`;
       let m = "free";
-      return r.position.y === this.coachBorderOffset * -1 ? m = "upper-border" : r.position.y + r.dimension.h === t.h + this.coachBorderOffset && (m = "lower-border"), n`
+      return e.position.y === this.coachBorderOffset * -1 ? m = "upper-border" : e.position.y + e.dimension.h === s.h + this.coachBorderOffset && (m = "lower-border"), n`
       <sbb-seat-reservation-area
-        id="${_}"
-        class="${x({ "sbb-seat-reservation-area--cursor-pointer": o !== null })}"
+        id="${g}"
+        class="${C({ "sbb-seat-reservation-area--cursor-pointer": i !== null })}"
         style=${v({
-        "--sbb-seat-reservation-area-width": c.w,
-        "--sbb-seat-reservation-area-height": c.h,
-        "--sbb-seat-reservation-area-top": g.y,
-        "--sbb-seat-reservation-area-left": g.x
+        "--sbb-seat-reservation-area-width": b.w,
+        "--sbb-seat-reservation-area-height": b.h,
+        "--sbb-seat-reservation-area-top": u.y,
+        "--sbb-seat-reservation-area-left": u.x
       })}
         mounting=${m}
         background="dark"
         aria-hidden="true"
       >
-        ${o ? n`
+        ${i ? n`
               <sbb-seat-reservation-graphic
                 style=${v({
-        "--sbb-seat-reservation-graphic-max-width": c.w,
+        "--sbb-seat-reservation-graphic-max-width": b.w,
         "--sbb-seat-reservation-graphic-height": this.baseGridSize,
-        "--sbb-seat-reservation-graphic-rotation": e
+        "--sbb-seat-reservation-graphic-rotation": r
       })}
-                name=${o}
+                name=${i}
                 role="img"
                 aria-hidden="true"
                 class="auto-width"
               ></sbb-seat-reservation-graphic>
-            ` : u}
+            ` : _}
       </sbb-seat-reservation-area>
-      ${o ? this._popover(_, p) : u}
+      ${i ? this._popover(g, p) : _}
     `;
     }
-    _getRenderElementWithoutArea(r, e, t) {
-      const a = this.getCalculatedDimension(r.dimension, t), s = this.getCalculatedPosition(r.position, r.dimension, t), i = r.icon && r.icon.indexOf("DRIVER_AREA") === -1 ? r.icon : r.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
+    _getRenderElementWithoutArea(e, r, s) {
+      const a = this.getCalculatedDimension(e.dimension, s), t = this.getCalculatedPosition(e.position, e.dimension, s), o = e.icon && e.icon.indexOf("DRIVER_AREA") === -1 ? e.icon : e.icon?.concat("_", this.seatReservations[this.currSelectedDeckIndex].vehicleType);
       return n` <sbb-seat-reservation-graphic
       style=${v({
         "--sbb-seat-reservation-graphic-width": a.w,
         "--sbb-seat-reservation-graphic-height": a.h,
-        "--sbb-seat-reservation-graphic-top": s.y,
-        "--sbb-seat-reservation-graphic-left": s.x,
+        "--sbb-seat-reservation-graphic-top": t.y,
+        "--sbb-seat-reservation-graphic-left": t.x,
         "--sbb-seat-reservation-graphic-position": "absolute",
-        "--sbb-seat-reservation-graphic-rotation": e
+        "--sbb-seat-reservation-graphic-rotation": r
       })}
-      name=${i ?? u}
+      name=${o ?? _}
       aria-hidden="true"
       ?stretch=${!0}
     ></sbb-seat-reservation-graphic>`;
     }
-    _getRenderedServiceElements(r, e, t) {
-      return t ? t?.map((a) => {
-        const s = a.icon ? l(a.icon, this._language.current) : null, i = this.getCalculatedDimension(a.dimension), o = this.getCalculatedPosition(a.position), b = a.rotation || 0, p = this.alignVertical ? b - 90 : b, c = `popover-trigger-${e}-${r}-${o.x}-${o.y}`;
+    _getRenderedServiceElements(e, r, s) {
+      return s ? s?.map((a) => {
+        const t = a.icon ? c(a.icon, this._language.current) : null, o = this.getCalculatedDimension(a.dimension), i = this.getCalculatedPosition(a.position), l = a.rotation || 0, p = this.alignVertical ? l - 90 : l, b = `popover-trigger-${r}-${e}-${i.x}-${i.y}`;
         return n`
         <sbb-seat-reservation-graphic
-          id="${c}"
+          id="${b}"
           style=${v({
-          "--sbb-seat-reservation-graphic-width": i.w,
-          "--sbb-seat-reservation-graphic-height": i.h,
-          "--sbb-seat-reservation-graphic-top": o.y,
-          "--sbb-seat-reservation-graphic-left": o.x,
+          "--sbb-seat-reservation-graphic-width": o.w,
+          "--sbb-seat-reservation-graphic-height": o.h,
+          "--sbb-seat-reservation-graphic-top": i.y,
+          "--sbb-seat-reservation-graphic-left": i.x,
           "--sbb-seat-reservation-graphic-position": "absolute",
           "--sbb-seat-reservation-graphic-rotation": p
         })}
           class="sbb-seat-reservation-graphic--cursor-pointer"
-          name=${a.icon ?? u}
+          name=${a.icon ?? _}
           role="img"
           aria-hidden="true"
         ></sbb-seat-reservation-graphic>
-        ${this._popover(c, s)}
+        ${this._popover(b, t)}
       `;
       }) : null;
     }
@@ -346,13 +340,13 @@ let X = (() => {
      * Each selection emits an array of all selected places
      * @param selectPlaceEvent
      */
-    _onSelectPlace(r) {
-      const e = r.detail;
-      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.hasSeatReservationNativeFocus || (this.hasSeatReservationNativeFocus = !0), this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(e), this.updateCurrentSelectedPlaceInCoach(e));
+    _onSelectPlace(e) {
+      const r = e.detail;
+      this.preventCoachScrollByPlaceClick = !0, this.isCoachGridFocusable = !1, this.focusedCoachIndex = -1, this.hasSeatReservationNativeFocus || (this.hasSeatReservationNativeFocus = !0), this.preventPlaceClick || (this.updateSelectedSeatReservationPlaces(r), this.updateCurrentSelectedPlaceInCoach(r));
     }
-    _onSelectNavCoach(r) {
-      const e = r.detail;
-      this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, e !== null && e !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(e)) : e === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
+    _onSelectNavCoach(e) {
+      const r = e.detail;
+      this.isKeyboardNavigation = !1, this.preventCoachScrollByPlaceClick = !1, this.hasSeatReservationNativeFocus = !0, r !== null && r !== this.currSelectedCoachIndex ? (this.unfocusPlaceElement(), this.scrollToSelectedNavCoach(r)) : r === this.currSelectedCoachIndex && (this.updateCurrentSelectedCoach(), this.preselectPlaceInCoach()), this._closePopover();
     }
     _onFocusNavCoach() {
       this.preventCoachScrollByPlaceClick ? this.focusPlaceElement(this.currSelectedPlace) : this.preselectPlaceInCoach(), this.isAutoScrolling = !1;
@@ -363,10 +357,10 @@ let X = (() => {
      * @param popoverContent
      * @private
      */
-    _popover(r, e) {
+    _popover(e, r) {
       return n`
-      <sbb-popover trigger="${r}" hover-trigger="">
-        <p class="sbb-text-s sbb-sr-popover">${e}</p>
+      <sbb-popover trigger="${e}" hover-trigger="">
+        <p class="sbb-text-s sbb-sr-popover">${r}</p>
       </sbb-popover>
     `;
     }
@@ -375,37 +369,37 @@ let X = (() => {
      * @private
      */
     _closePopover() {
-      this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((r) => r.close());
+      this.shadowRoot?.querySelectorAll("sbb-popover:is(:state(state-opened),[state--state-opened])").forEach((e) => e.close());
     }
-    _getDescriptionTableCoach(r) {
-      if (!r.places?.length)
-        return l("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
-          r.id
+    _getDescriptionTableCoach(e) {
+      if (!e.places?.length)
+        return c("COACH_BLOCKED_TABLE_CAPTION", this._language.current, [
+          e.id
         ]);
-      let e;
-      const t = this._getTitleDescriptionListString(r.graphicElements), a = this._getTitleDescriptionListString(r.serviceElements);
-      if (e = l("COACH_TABLE_CAPTION", this._language.current, [
-        r.id
+      let r;
+      const s = this._getTitleDescriptionListString(e.graphicElements), a = this._getTitleDescriptionListString(e.serviceElements);
+      if (r = c("COACH_TABLE_CAPTION", this._language.current, [
+        e.id
       ]), !this.hasNavigation) {
-        const s = this.getAvailableFreePlacesNumFromCoach(r.places), i = l("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [s.seats, s.bicycles]);
-        e = e.concat(". ").concat(i).concat(". ");
+        const t = this.getAvailableFreePlacesNumFromCoach(e.places), o = c("COACH_AVAILABLE_NUMBER_OF_PLACES", this._language.current, [t.seats, t.bicycles]);
+        r = r.concat(". ").concat(o).concat(". ");
       }
-      return (t || a) && (e += ". " + l("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", e += a + ", " + t + "."), e;
+      return (s || a) && (r += ". " + c("COACH_AVAILABLE_SERVICES", this._language.current) + ": ", r += a + ", " + s + "."), r;
     }
-    _getTitleDescriptionListString(r) {
-      const e = [];
-      return r?.map((t) => {
-        const a = t.icon;
+    _getTitleDescriptionListString(e) {
+      const r = [];
+      return e?.map((s) => {
+        const a = s.icon;
         if (!a)
           return null;
-        const s = e.indexOf(a) > -1, i = l(t.icon, this._language.current), o = this._notFixedRotatableAreaIcons.indexOf(a) === -1 && this._notAreaElements.indexOf(a) === -1;
-        return s || e.push(t.icon), i && !s && o ? i : null;
-      }).filter((t) => !!t).join(", ");
+        const t = r.indexOf(a) > -1, o = c(s.icon, this._language.current), i = this._notFixedRotatableAreaIcons.indexOf(a) === -1 && this._notAreaElements.indexOf(a) === -1;
+        return t || r.push(s.icon), o && !t && i ? o : null;
+      }).filter((s) => !!s).join(", ");
     }
-  }, d = h, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    $(null, w = { value: d }, C, { kind: "class", name: d.name, metadata: r }, null, f), d = w.value, r && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), h.styles = [R, N], y(d, f), d;
+  }, h = d, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    k(null, f = { value: h }, $, { kind: "class", name: h.name, metadata: e }, null, w), h = f.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), d.styles = [R, T], y(h, w), h;
 })();
 export {
   X as SbbSeatReservationElement