@sbb-esta/lyne-elements-dev 5.13.0-dev.1793630348 → 5.13.0-dev.1793637609

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/custom-elements.json +24 -0
  2. package/development/status.pure.js +1 -1
  3. package/development/train/train-formation/train-formation.component.d.ts +1 -0
  4. package/development/train.pure.js +7 -5
  5. package/lean-off-brand-theme.css +42 -0
  6. package/lean-safety-theme.css +42 -0
  7. package/lean-theme.css +42 -0
  8. package/off-brand-theme.css +42 -0
  9. package/package.json +2 -2
  10. package/safety-theme.css +42 -0
  11. package/standard-theme.css +42 -0
  12. package/status/_status.global.scss +42 -0
  13. package/status.pure.js +1 -1
  14. package/train.pure.js +3 -3
package/custom-elements.json CHANGED
@@ -175911,6 +175911,30 @@
175911
175911
  }
175912
175912
  ]
175913
175913
  },
175914
+ {
175915
+ "kind": "method",
175916
+ "name": "_applySectorStyle",
175917
+ "privacy": "private",
175918
+ "return": {
175919
+ "type": {
175920
+ "text": "void"
175921
+ }
175922
+ },
175923
+ "parameters": [
175924
+ {
175925
+ "name": "element",
175926
+ "type": {
175927
+ "text": "HTMLElement | undefined"
175928
+ }
175929
+ },
175930
+ {
175931
+ "name": "sector",
175932
+ "type": {
175933
+ "text": "AggregatedSector"
175934
+ }
175935
+ }
175936
+ ]
175937
+ },
175914
175938
  {
175915
175939
  "kind": "field",
175916
175940
  "name": "elementDependencies",
package/development/status.pure.js CHANGED
@@ -5,7 +5,7 @@ import { SbbElement } from "./core.js";
5
5
  import { SbbIconNameMixin } from "./icon.pure.js";
6
6
 
7
7
  // src/elements/status/status.scss?inline
8
- var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-color-2);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-color-sky);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-color-error);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-color-5);\n --sbb-status-text-color: var(--sbb-color-2);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n";
8
+ var status_default = ":host {\n --sbb-status-text-color: var(--sbb-status-color);\n display: flex;\n gap: var(--sbb-status-gap);\n color: var(--sbb-status-text-color);\n font-size: var(--sbb-status-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([type=error]) {\n --sbb-status-color: var(--sbb-status-color-error);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-error);\n}\n\n:host([type=success]) {\n --sbb-status-color: var(--sbb-status-color-success);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-success);\n}\n\n:host([type=warning]) {\n --sbb-status-color: var(--sbb-status-color-warning);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-warning);\n}\n\n:host([type=pending]) {\n --sbb-status-color: var(--sbb-status-color-pending);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-pending);\n}\n\n:host([type=incomplete]) {\n --sbb-status-color: var(--sbb-status-color-incomplete);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-incomplete);\n}\n\n:host([type=not-started]) {\n --sbb-status-color: var(--sbb-status-color-not-started);\n --sbb-status-text-color: var(--sbb-status-text-color-not-started);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-not-started);\n}\n\n:host([type=in-progress]) {\n --sbb-status-color: var(--sbb-status-color-in-progress);\n --sbb-status-icon-background-color: var(--sbb-status-icon-background-color-in-progress);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])) {\n --sbb-status-gap: var(--sbb-status-gap-with-title);\n --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);\n --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);\n color: var(--sbb-status-title-color);\n}\n\n.sbb-status__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--sbb-status-color);\n margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-status__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n::slotted(sbb-title) {\n margin-block: 0;\n}\n\nsbb-icon {\n --sbb-icon-svg-width: var(--sbb-status-icon-dimension);\n --sbb-icon-svg-height: var(--sbb-status-icon-dimension);\n height: fit-content;\n background: radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - 0.4375rem), transparent calc(100% - 0.4375rem));\n}\n";
9
9
 
10
10
  // src/elements/status/status.component.ts
11
11
  /**
package/development/train/train-formation/train-formation.component.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare class SbbTrainFormationElement extends SbbTrainFormationElement_b
22
22
  connectedCallback(): void;
23
23
  private _readDirectionLabel;
24
24
  private _readSectors;
25
+ private _applySectorStyle;
25
26
  protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
26
27
  protected render(): TemplateResult;
27
28
  }
package/development/train.pure.js CHANGED
@@ -2,7 +2,7 @@ import { html, isServer, nothing, unsafeCSS } from "lit";
2
2
  import { SbbButtonBaseElement, SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbNamedSlotListMixin, SbbPropertyWatcherController, forceType, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nBlockedPassage, i18nClass, i18nClosedCompartmentLabel, i18nCouchetteWagonLabel, i18nLocomotiveLabel, i18nRestaurantWagonLabel, i18nSector, i18nSectorShort, i18nSleepingWagonLabel, i18nTrain, i18nTrains, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, omitEmptyConverter } from "./core.js";
3
3
  import { __esDecorate, __runInitializers } from "tslib";
4
4
  import { property, state } from "lit/decorators.js";
5
- import { styleMap } from "lit/directives/style-map.js";
5
+ import { ref } from "lit/directives/ref.js";
6
6
  import { when } from "lit/directives/when.js";
7
7
  import { html as html$1, unsafeStatic } from "lit/static-html.js";
8
8
  import { SbbDividerElement } from "./divider.pure.js";
@@ -229,6 +229,11 @@ let SbbTrainFormationElement = (() => {
229
229
  }]);
230
230
  this.toggleState("has-sectors", this._sectors.some((s) => !!s.label));
231
231
  }
232
+ _applySectorStyle(element, sector) {
233
+ if (!element) return;
234
+ element.style.setProperty("--sbb-train-formation-wagon-count", `${sector.wagonCount}`);
235
+ element.style.setProperty("--sbb-train-formation-wagon-blocked-passage-count", `${sector.blockedPassageCount}`);
236
+ }
232
237
  willUpdate(changedProperties) {
233
238
  super.willUpdate(changedProperties);
234
239
  if (changedProperties.has("listChildren")) {
@@ -241,10 +246,7 @@ let SbbTrainFormationElement = (() => {
241
246
  ${this._sectors.length && this._sectors[0].label !== void 0 ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
242
247
  ${this._sectors.map((aggregatedSector) => html`<span
243
248
  class="sbb-train-formation__sector"
244
- style=${styleMap({
245
- "--sbb-train-formation-wagon-count": aggregatedSector.wagonCount,
246
- "--sbb-train-formation-wagon-blocked-passage-count": aggregatedSector.blockedPassageCount
247
- })}
249
+ ${ref((element) => this._applySectorStyle(element, aggregatedSector))}
248
250
  >
249
251
  <span class="sbb-train-formation__sector-sticky-wrapper">
250
252
  ${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}
package/lean-off-brand-theme.css CHANGED
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/lean-safety-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/lean-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/off-brand-theme.css CHANGED
@@ -1855,9 +1855,51 @@ summary {
1855
1855
  --sbb-slider-padding-block: 0.125rem;
1856
1856
  --sbb-status-color: var(--sbb-color-4);
1857
1857
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1858
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1858
1859
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1859
1860
  --sbb-status-title-color: var(--sbb-color-granite);
1860
1861
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1862
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1863
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1864
+ --sbb-status-color-error: var(--sbb-color-error);
1865
+ --sbb-status-icon-background-color-error: color-mix(
1866
+ in srgb,
1867
+ var(--sbb-color-error) 10%,
1868
+ transparent
1869
+ );
1870
+ --sbb-status-color-success: var(--sbb-color-success);
1871
+ --sbb-status-icon-background-color-success: color-mix(
1872
+ in srgb,
1873
+ var(--sbb-color-success) 10%,
1874
+ transparent
1875
+ );
1876
+ --sbb-status-color-warning: var(--sbb-color-2);
1877
+ --sbb-status-icon-background-color-warning: color-mix(
1878
+ in srgb,
1879
+ var(--sbb-color-peach) 30%,
1880
+ transparent
1881
+ );
1882
+ --sbb-status-color-pending: var(--sbb-color-sky);
1883
+ --sbb-status-icon-background-color-pending: color-mix(
1884
+ in srgb,
1885
+ var(--sbb-color-sky) 10%,
1886
+ transparent
1887
+ );
1888
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1889
+ --sbb-status-icon-background-color-incomplete: color-mix(
1890
+ in srgb,
1891
+ var(--sbb-color-error) 10%,
1892
+ transparent
1893
+ );
1894
+ --sbb-status-color-not-started: var(--sbb-color-5);
1895
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1896
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1897
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1898
+ --sbb-status-icon-background-color-in-progress: color-mix(
1899
+ in srgb,
1900
+ var(--sbb-color-sky) 10%,
1901
+ transparent
1902
+ );
1861
1903
  --sbb-step-label-color: var(--sbb-color-4);
1862
1904
  --sbb-step-label-prefix-border-style: solid;
1863
1905
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.13.0-dev.1793630348",
3
+ "version": "5.13.0-dev.1793637609",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/bdd296604869c12c0caa5184bea352ef9af8d770"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/b121bc0877bbe394e57200193278f2569ec4958b"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/standard-theme.css CHANGED
@@ -1875,9 +1875,51 @@ summary {
1875
1875
  --sbb-slider-padding-block: 0.125rem;
1876
1876
  --sbb-status-color: var(--sbb-color-4);
1877
1877
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1878
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
1878
1879
  --sbb-status-font-size: var(--sbb-text-font-size-s);
1879
1880
  --sbb-status-title-color: var(--sbb-color-granite);
1880
1881
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1882
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
1883
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
1884
+ --sbb-status-color-error: var(--sbb-color-error);
1885
+ --sbb-status-icon-background-color-error: color-mix(
1886
+ in srgb,
1887
+ var(--sbb-color-error) 10%,
1888
+ transparent
1889
+ );
1890
+ --sbb-status-color-success: var(--sbb-color-success);
1891
+ --sbb-status-icon-background-color-success: color-mix(
1892
+ in srgb,
1893
+ var(--sbb-color-success) 10%,
1894
+ transparent
1895
+ );
1896
+ --sbb-status-color-warning: var(--sbb-color-2);
1897
+ --sbb-status-icon-background-color-warning: color-mix(
1898
+ in srgb,
1899
+ var(--sbb-color-peach) 30%,
1900
+ transparent
1901
+ );
1902
+ --sbb-status-color-pending: var(--sbb-color-sky);
1903
+ --sbb-status-icon-background-color-pending: color-mix(
1904
+ in srgb,
1905
+ var(--sbb-color-sky) 10%,
1906
+ transparent
1907
+ );
1908
+ --sbb-status-color-incomplete: var(--sbb-color-error);
1909
+ --sbb-status-icon-background-color-incomplete: color-mix(
1910
+ in srgb,
1911
+ var(--sbb-color-error) 10%,
1912
+ transparent
1913
+ );
1914
+ --sbb-status-color-not-started: var(--sbb-color-5);
1915
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
1916
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
1917
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
1918
+ --sbb-status-icon-background-color-in-progress: color-mix(
1919
+ in srgb,
1920
+ var(--sbb-color-sky) 10%,
1921
+ transparent
1922
+ );
1881
1923
  --sbb-step-label-color: var(--sbb-color-4);
1882
1924
  --sbb-step-label-prefix-border-style: solid;
1883
1925
  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
package/status/_status.global.scss CHANGED
@@ -5,6 +5,48 @@ $theme: 'standard' !default;
5
5
  @mixin base {
6
6
  --sbb-status-color: var(--sbb-color-4);
7
7
  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
8
+ --sbb-status-gap-with-title: var(--sbb-spacing-responsive-xxxs);
8
9
  --sbb-status-font-size: var(--sbb-text-font-size-s);
9
10
  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
11
+ --sbb-status-icon-dimension: var(--sbb-size-icon-ui-small);
12
+ --sbb-status-icon-background-color: var(--sbb-background-color-3);
13
+ --sbb-status-color-error: var(--sbb-color-error);
14
+ --sbb-status-icon-background-color-error: color-mix(
15
+ in srgb,
16
+ var(--sbb-color-error) 10%,
17
+ transparent
18
+ );
19
+ --sbb-status-color-success: var(--sbb-color-success);
20
+ --sbb-status-icon-background-color-success: color-mix(
21
+ in srgb,
22
+ var(--sbb-color-success) 10%,
23
+ transparent
24
+ );
25
+ --sbb-status-color-warning: var(--sbb-color-2);
26
+ --sbb-status-icon-background-color-warning: color-mix(
27
+ in srgb,
28
+ var(--sbb-color-peach) 30%,
29
+ transparent
30
+ );
31
+ --sbb-status-color-pending: var(--sbb-color-sky);
32
+ --sbb-status-icon-background-color-pending: color-mix(
33
+ in srgb,
34
+ var(--sbb-color-sky) 10%,
35
+ transparent
36
+ );
37
+ --sbb-status-color-incomplete: var(--sbb-color-error);
38
+ --sbb-status-icon-background-color-incomplete: color-mix(
39
+ in srgb,
40
+ var(--sbb-color-error) 10%,
41
+ transparent
42
+ );
43
+ --sbb-status-color-not-started: var(--sbb-color-5);
44
+ --sbb-status-text-color-not-started: var(--sbb-color-2);
45
+ --sbb-status-icon-background-color-not-started: var(--sbb-background-color-3);
46
+ --sbb-status-color-in-progress: var(--sbb-color-sky);
47
+ --sbb-status-icon-background-color-in-progress: color-mix(
48
+ in srgb,
49
+ var(--sbb-color-sky) 10%,
50
+ transparent
51
+ );
10
52
  }
package/status.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-color-2)}:host([type=pending]){--sbb-status-color:var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color:var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color:var(--sbb-color-5);--sbb-status-text-color:var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color:var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}
1
+ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-status-color-error);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-status-color-success);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-status-color-warning);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-warning)}:host([type=pending]){--sbb-status-color:var(--sbb-status-color-pending);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-pending)}:host([type=incomplete]){--sbb-status-color:var(--sbb-status-color-incomplete);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-incomplete)}:host([type=not-started]){--sbb-status-color:var(--sbb-status-color-not-started);--sbb-status-text-color:var(--sbb-status-text-color-not-started);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-not-started)}:host([type=in-progress]){--sbb-status-color:var(--sbb-status-color-in-progress);--sbb-status-icon-background-color:var(--sbb-status-icon-background-color-in-progress)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-status-gap-with-title);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}sbb-icon{--sbb-icon-svg-width:var(--sbb-status-icon-dimension);--sbb-icon-svg-height:var(--sbb-status-icon-dimension);background:radial-gradient(circle, var(--sbb-status-icon-background-color) calc(100% - .4375rem), transparent calc(100% - .4375rem));height:fit-content}
2
2
  `;let c=(()=>{let c=o(a),l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[i({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-status`}static{this.styles=[r(s)]}#e;get type(){return this.#e}set type(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}renderIconName(){return super.renderIconName()||this._statusTypes.get(this.type)}render(){return n`
3
3
  <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
4
4
  <span class="sbb-status__content">
package/train.pure.js CHANGED
@@ -1,10 +1,10 @@
1
- import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbButtonBaseElement as i,SbbElement as a,SbbLanguageController as o,SbbLinkBaseElement as s,SbbNamedSlotListMixin as c,SbbPropertyWatcherController as l,forceType as u,handleDistinctChange as d,hostScrollbarStyles as f,i18nAdditionalWagonInformationHeading as p,i18nAnd as m,i18nBlockedPassage as h,i18nClass as g,i18nClosedCompartmentLabel as _,i18nCouchetteWagonLabel as v,i18nLocomotiveLabel as y,i18nRestaurantWagonLabel as b,i18nSector as x,i18nSectorShort as S,i18nSleepingWagonLabel as ee,i18nTrain as C,i18nTrains as w,i18nWagonLabel as te,i18nWagonLabelNumber as ne,i18nWagonsLabel as T,omitEmptyConverter as E}from"./core.js";import{__esDecorate as D,__runInitializers as O}from"tslib";import{property as k,state as A}from"lit/decorators.js";import{styleMap as j}from"lit/directives/style-map.js";import{when as re}from"lit/directives/when.js";import{html as M,unsafeStatic as N}from"lit/static-html.js";import{SbbDividerElement as ie}from"./divider.pure.js";import{SbbIconElement as P}from"./icon.pure.js";import{SbbTimetableOccupancyIconElement as ae}from"./timetable-occupancy-icon.pure.js";const F=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[A()],D(this,null,n,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=O(this,r,null);get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(...e){super(...e),O(this,i),this.addController(new l(this,()=>this.closest(`sbb-train-formation`),{orientation:e=>{this.orientation&&this.internals.states.delete(`orientation-${this.orientation}`),this.orientation=e.orientation,this.orientation&&this.internals.states.add(`orientation-${this.orientation}`)}}))}}})();var I=`:host{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height);grid-template-areas:"icon";align-items:center;display:grid}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:"";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);background-color:var(--sbb-train-blocked-passage-background-color);border-radius:50%}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}
1
+ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbButtonBaseElement as i,SbbElement as a,SbbLanguageController as o,SbbLinkBaseElement as s,SbbNamedSlotListMixin as c,SbbPropertyWatcherController as l,forceType as u,handleDistinctChange as d,hostScrollbarStyles as f,i18nAdditionalWagonInformationHeading as p,i18nAnd as m,i18nBlockedPassage as h,i18nClass as g,i18nClosedCompartmentLabel as _,i18nCouchetteWagonLabel as v,i18nLocomotiveLabel as y,i18nRestaurantWagonLabel as b,i18nSector as x,i18nSectorShort as S,i18nSleepingWagonLabel as ee,i18nTrain as C,i18nTrains as w,i18nWagonLabel as te,i18nWagonLabelNumber as ne,i18nWagonsLabel as T,omitEmptyConverter as E}from"./core.js";import{__esDecorate as D,__runInitializers as O}from"tslib";import{property as k,state as A}from"lit/decorators.js";import{ref as j}from"lit/directives/ref.js";import{when as re}from"lit/directives/when.js";import{html as M,unsafeStatic as N}from"lit/static-html.js";import{SbbDividerElement as ie}from"./divider.pure.js";import{SbbIconElement as P}from"./icon.pure.js";import{SbbTimetableOccupancyIconElement as ae}from"./timetable-occupancy-icon.pure.js";const F=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[A()],D(this,null,n,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=O(this,r,null);get orientation(){return this.#e}set orientation(e){this.#e=e}constructor(...e){super(...e),O(this,i),this.addController(new l(this,()=>this.closest(`sbb-train-formation`),{orientation:e=>{this.orientation&&this.internals.states.delete(`orientation-${this.orientation}`),this.orientation=e.orientation,this.orientation&&this.internals.states.add(`orientation-${this.orientation}`)}}))}}})();var I=`:host{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height);grid-template-areas:"icon";align-items:center;display:grid}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:"";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);background-color:var(--sbb-train-blocked-passage-background-color);border-radius:50%}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}
2
2
  `,L=class extends F(a){static{this.elementName=`sbb-train-blocked-passage`}static{this.styles=[r(I)]}},R=`:host{--sbb-train-formation-scroll-padding:var(--sbb-train-formation-padding);--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-short);gap:var(--_sbb-train-formation-sectors-to-train-gap,0) 0;padding-block:var(--sbb-train-formation-padding);color:var(--sbb-train-formation-text-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);grid-template:"start sectors end""start trains end"/auto 1fr auto;display:grid;position:relative;overflow:auto visible}:host:before,:host:after{content:"";width:var(--sbb-train-formation-scroll-padding);display:block}:host:before{grid-area:start}:host:after{grid-area:end}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:state(has-sectors),[state--has-sectors])){--_sbb-train-formation-sectors-to-train-gap:var(--sbb-train-formation-gap)}:host(:is(:state(has-direction-label),[state--has-direction-label])){--_sbb-train-formation-reserve-spacing-display:block}:host([orientation=vertical]){--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-short);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-flex-direction:column;--_sbb-train-formation-flex-direction-inverted:row;padding-block:unset;padding-inline:var(--sbb-train-formation-padding);gap:0 var(--_sbb-train-formation-sectors-to-train-gap,0);grid-template:"start start""sectors trains"1fr"end end";width:fit-content;overflow:visible auto}:host([orientation=vertical]):before,:host([orientation=vertical]):after{width:auto;height:var(--sbb-train-formation-scroll-padding)}.sbb-train-formation__sectors{gap:var(--sbb-train-formation-wagon-gap);flex-direction:var(--_sbb-train-formation-flex-direction);grid-area:sectors;display:flex}.sbb-train-formation__sector{--_wagon-sum:var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-dimension-long);--_blocked-passage-sum:var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-dimension);--_total-count:calc(var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count));--_gap-sum:calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width:calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--_sector-line-length:calc(.5 * var(--_sector-width));flex:0 0 var(--_sector-width);flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;display:flex;overflow:clip visible}:host([orientation=vertical]) .sbb-train-formation__sector{overflow:visible clip}.sbb-train-formation__sector-sticky-wrapper{padding:0 var(--sbb-train-formation-sector-padding);margin:0 var(--sbb-train-formation-sector-margin);white-space:nowrap;position:sticky;inset:auto 0}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper{writing-mode:sideways-lr;padding:var(--sbb-train-formation-sector-padding) 0;margin:var(--sbb-train-formation-sector-margin) 0;inset:0 auto}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:var(--_sector-line-length);position:absolute}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:before,:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:after{width:auto;height:var(--_sector-line-length)}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}
3
- `;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
3
+ `;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}_applySectorStyle(e,t){e&&(e.style.setProperty(`--sbb-train-formation-wagon-count`,`${t.wagonCount}`),e.style.setProperty(`--sbb-train-formation-wagon-blocked-passage-count`,`${t.blockedPassageCount}`))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
4
4
  ${this._sectors.length&&this._sectors[0].label!==void 0?e`<div class="sbb-train-formation__sectors" aria-hidden="true">
5
5
  ${this._sectors.map(t=>e`<span
6
6
  class="sbb-train-formation__sector"
7
- style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
7
+ ${j(e=>this._applySectorStyle(e,t))}
8
8
  >
9
9
  <span class="sbb-train-formation__sector-sticky-wrapper">
10
10
  ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}