@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779890843

package/tab-label.component-BYssa8XI.js

@@ -1,158 +0,0 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { unsafeCSS as n } from "lit";
-import { property as r } from "lit/decorators.js";
-import { SbbDisabledMixin as i, SbbElement as a, SbbPropertyWatcherController as o, forceType as s, omitEmptyConverter as c } from "./core.js";
-import { html as l, unsafeStatic as u } from "lit/static-html.js";
-import { SbbIconNameMixin as d } from "./icon.pure.js";
-import { tabLabelCommonStyles as f } from "./tabs/common/styles.js";
-import { SbbTabChangeEvent as p } from "./tabs/tab-group/tab-group.component.js";
-//#region src/elements/tabs/tab-label/tab-label.scss?inline
-var m = ":host{--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-outline-border-radius-internal: calc( var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset) )}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size: var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events, unset)}@media(forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{position:relative;display:flex;align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);margin:0;padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration)}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{position:absolute;content:\"\";inset-inline:0;inset-block-end:0;height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale, 0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{content:\"\";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color)}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-scale: 1}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale: 1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}:host{display:inline-block;max-width:100%;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{display:flex;flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{margin:0;color:var(--sbb-tab-label-amount-color);font-weight:400;text-decoration:var(--sbb-tab-label-text-decoration)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}", h = (() => {
-	let h = i(d(a)), g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
-	return class extends h {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-			g = [r()], y = [s(), r({
-				reflect: !0,
-				type: Boolean
-			})], S = [s(), r({
-				reflect: !0,
-				converter: c
-			})], e(this, null, g, {
-				kind: "accessor",
-				name: "level",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "level" in e,
-					get: (e) => e.level,
-					set: (e, t) => {
-						e.level = t;
-					}
-				},
-				metadata: t
-			}, _, v), e(this, null, y, {
-				kind: "accessor",
-				name: "active",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "active" in e,
-					get: (e) => e.active,
-					set: (e, t) => {
-						e.active = t;
-					}
-				},
-				metadata: t
-			}, b, x), e(this, null, S, {
-				kind: "accessor",
-				name: "amount",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "amount" in e,
-					get: (e) => e.amount,
-					set: (e, t) => {
-						e.amount = t;
-					}
-				},
-				metadata: t
-			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		static {
-			this.elementName = "sbb-tab-label";
-		}
-		static {
-			this.role = "tab";
-		}
-		static {
-			this.styles = [f, n(m)];
-		}
-		#e;
-		get level() {
-			return this.#e;
-		}
-		set level(e) {
-			this.#e = e;
-		}
-		#t;
-		get active() {
-			return this.#t;
-		}
-		set active(e) {
-			this.#t = e;
-		}
-		#n;
-		get amount() {
-			return this.#n;
-		}
-		set amount(e) {
-			this.#n = e;
-		}
-		get tab() {
-			return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
-		}
-		get group() {
-			return this.closest("sbb-tab-group");
-		}
-		constructor() {
-			super(), this._selected = !1, this._previousSize = null, this.#e = t(this, _, "1"), this.#t = (t(this, v), t(this, b, !1)), this.#n = (t(this, x), t(this, C, "")), t(this, w), this.addEventListener("click", () => this.activate()), this.addController(new o(this, () => this.group, { size: (e) => {
-				this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size ?? null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-			} }));
-		}
-		connectedCallback() {
-			super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
-		}
-		willUpdate(e) {
-			super.willUpdate(e), e.has("active") && (this.internals.ariaSelected = `${this.active}`, this.active && !this.disabled ? this.activate() : this.deactivate()), e.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
-		}
-		deactivate() {
-			this.active = !1, this.tab?.deactivate(), this._selected = !1, this.tabIndex = -1;
-		}
-		activate() {
-			if (this.disabled) return;
-			let e = this.group?.labels || [], t = e.find((e) => e._selected);
-			if (t !== this) {
-				t?.deactivate(), this.active = !0, this.tab?.activate(), this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", {
-					bubbles: !0,
-					composed: !0
-				}));
-				let n = {
-					activeIndex: e.findIndex((e) => e === this),
-					activeTabLabel: this,
-					activeTab: this.tab,
-					previousIndex: e.findIndex((e) => e === t),
-					previousTabLabel: t,
-					previousTab: t?.tab
-				};
-				this.group?.dispatchEvent(new p(n));
-			}
-		}
-		linkToTab() {
-			this.tab && (this.internals.ariaControlsElements = [this.tab]);
-		}
-		render() {
-			let e = `h${Number(this.level) < 7 ? this.level : "1"}`;
-			return l`
-        <${u(e)} class="sbb-tab-label">
-          <span class="sbb-tab-label__icon">
-            ${this.renderIconSlot()}
-          </span>
-          <span class="sbb-tab-label__text">
-            <slot></slot>
-          </span>
-          <p class="sbb-tab-label__amount">
-            <slot name="amount">${this.amount}</slot>
-          </p>
-        </${u(e)}>
-    `;
-		}
-	};
-})();
-//#endregion
-export { h as t };

package/tabs/common/tab-group-common.global.scss

@@ -1,17 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-// These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
-@mixin base {
-  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
-  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
-  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
-  --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-tab-group-content-gap-size-l),
-        'lean': var(--sbb-tab-group-content-gap-size-s),
-      ),
-      $theme
-    )};
-}

package/tabs/tab-nav-bar/tab-nav-bar.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-@use '../common/tab-label-common' as tab-label-common;
-
-$theme: 'standard' !default;
-
-@mixin rules {
-  sbb-tab-nav-bar .sbb-tab-amount {
-    @include tab-label-common.tab-label-amount;
-  }
-}

package/teaser/teaser.global.scss

@@ -1,24 +0,0 @@
-@use '../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-teaser-scale-hover: 1.02;
-  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
-  --sbb-teaser-flex-direction: row;
-  --sbb-teaser-align-items: center;
-  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
-  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
-  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
-  --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
-}
-
-@mixin rules {
-  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-object-fit: cover;
-    --sbb-image-aspect-ratio: 4 / 3;
-
-    // The transition of the scale is done by the global rules in core.scss
-    scale: var(--sbb-teaser-scale, 1);
-  }
-}

package/timetable-form/timetable-form-details/timetable-form-details.global.scss

@@ -1,12 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
-    var(--sbb-border-color-4-inverted);
-  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
-}

package/timetable-form/timetable-form-field/timetable-form-field.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
-  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
-  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
-  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
-}

package/title/title-common.global.scss

@@ -1,7 +0,0 @@
-@use '../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-title-color: var(--sbb-color-3);
-}

package/toggle/toggle-option/toggle-option.global.scss

@@ -1,10 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
-  --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
-  --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
-}

package/train/train-blocked-passage/train-blocked-passage.global.scss

@@ -1,16 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
-  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
-  --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
-  --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
-  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
-}
-
-@mixin forced-colors {
-  --sbb-train-blocked-passage-background-color: CanvasText;
-  --sbb-train-blocked-passage-bar-color: Canvas;
-}

package/train/train-formation/train-formation.global.scss

@@ -1,26 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
-  --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-train-formation-sector-line-color: light-dark(
-    var(--sbb-color-cement),
-    var(--sbb-color-smoke)
-  );
-  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
-  --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
-  --sbb-train-formation-text-color: var(--sbb-color-3);
-  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
-  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
-  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
-  --_sbb-train-formation-flex-direction: row;
-  --_sbb-train-formation-flex-direction-inverted: column;
-}
-
-@mixin forced-colors {
-  --sbb-train-formation-sector-line-color: CanvasText;
-}