@sbb-esta/lyne-elements-dev 4.9.0-dev.1775028444 → 4.9.0-dev.1775050914

package/teaser-hero.component-BL9zIJPw.js

@@ -0,0 +1,84 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbLinkBaseElement as i } from "./core/base-elements.js";
+import { forceType as a, omitEmptyConverter as o } from "./core/decorators.js";
+import { boxSizingStyles as s } from "./core/styles.js";
+import { html as c } from "lit/static-html.js";
+import { SbbBlockLinkStaticElement as l } from "./link.pure.js";
+//#region src/elements/teaser-hero/teaser-hero.scss?inline
+var u = ":host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-heading);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-1-negative);--sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);--sbb-panel-background-color-hover: var(--sbb-color-primary);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media(min-width:64rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media(min-width:64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media(any-hover:hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}::slotted([slot=image]){width:100%}.sbb-teaser-hero{position:relative;display:flex;min-height:var(--sbb-panel-height);text-decoration:none}.sbb-teaser-hero: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)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media(any-hover:hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-link-content),[state--slotted-link-content]),[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-heading);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}:host(:not([href])) .sbb-teaser-hero__panel-link{display:none}";
+//#endregion
+//#region src/elements/teaser-hero/teaser-hero.component.ts
+l.define();
+var d = (() => {
+	let l = i, d, f = [], p = [];
+	return class extends l {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			d = [a(), r({
+				attribute: "link-content",
+				reflect: !0,
+				converter: o
+			})], e(this, null, d, {
+				kind: "accessor",
+				name: "linkContent",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "linkContent" in e,
+					get: (e) => e.linkContent,
+					set: (e, t) => {
+						e.linkContent = t;
+					}
+				},
+				metadata: t
+			}, f, p), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-teaser-hero";
+		}
+		static {
+			this.styles = [s, n(u)];
+		}
+		#e = t(this, f, "");
+		get linkContent() {
+			return this.#e;
+		}
+		set linkContent(e) {
+			this.#e = e;
+		}
+		_imageSlotChanged() {
+			Array.from(this.querySelectorAll("sbb-chip-label")).forEach((e) => e.color = "charcoal");
+		}
+		renderTemplate() {
+			return c`
+      <span class="sbb-teaser-hero__panel">
+        <p class="sbb-teaser-hero__panel-text">
+          <slot></slot>
+        </p>
+        <sbb-block-link-static
+          class="sbb-teaser-hero__panel-link"
+          icon-name="chevron-small-right-small"
+          icon-placement="end"
+          size="m"
+          negative
+        >
+          <slot name="link-content">${this.linkContent}</slot>
+        </sbb-block-link-static>
+      </span>
+      <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, p);
+		}
+	};
+})();
+//#endregion
+export { d as t };

package/teaser-hero.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser-hero.component-Xv0y4x95.js";
+import { t as e } from "./teaser-hero.component-BL9zIJPw.js";
 import "./teaser-hero.pure.js";
 //#region src/elements/teaser-hero.ts
 e.define();

package/teaser-hero.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./teaser-hero.component-Xv0y4x95.js";
+import { t as e } from "./teaser-hero.component-BL9zIJPw.js";
 export { e as SbbTeaserHeroElement };

package/teaser-product/common/teaser-product-common.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../teaser-product-common-B4E35ORU.js";
+import { n as e, t } from "../../teaser-product-common-B9fZrp6w.js";
 export { t as SbbTeaserProductCommonElementMixin, e as teaserProductCommonStyle };

package/teaser-product/common.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../teaser-product-common-B4E35ORU.js";
+import { n as e, t } from "../teaser-product-common-B9fZrp6w.js";
 //#region src/elements/teaser-product/common.ts
 console.warn("The entrypoint '@sbb-esta/elements/teaser-product/common.js' has been deprecated.\nUse either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.");
 //#endregion

package/teaser-product/teaser-product/teaser-product.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../teaser-product.component-6A7NXDgh.js";
+import { t as e } from "../../teaser-product.component-XY7319H9.js";
 export { e as SbbTeaserProductElement };

package/teaser-product/teaser-product.js

@@ -1,4 +1,4 @@
-import { t as e } from "../teaser-product.component-6A7NXDgh.js";
+import { t as e } from "../teaser-product.component-XY7319H9.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/teaser-product/teaser-product.js' has been deprecated.\nUse either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.");
 //#endregion
 export { e as SbbTeaserProductElement };

package/teaser-product-common-B9fZrp6w.js

@@ -0,0 +1,63 @@
+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 { SbbNegativeMixin as a } from "./core/mixins.js";
+//#endregion
+//#region src/elements/teaser-product/common/teaser-product-common.ts
+var o = r(":host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-color: light-dark( var(--sbb-color-cloud), var(--sbb-color-midnight) );--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-4);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-footer-color: light-dark( var(--sbb-color-anthracite), var(--sbb-color-cloud) );--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media(min-width:64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color: var(--sbb-color-4-negative);--sbb-teaser-product-footer-color: var(--sbb-color-4-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media(min-width:64rem){.sbb-teaser-product__image-container{position:absolute;inset:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media(forced-colors:active){.sbb-teaser-product__root:after{content:\"\";position:absolute;display:block;inset:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media(min-width:64rem){.sbb-teaser-product__container{display:grid;grid:\"content .\" 1fr \"footnote .\" auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:\". content\" \". footnote\"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media(min-width:64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))) .sbb-teaser-product__footnote{padding-block-start:0}@media(min-width:64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}"), s = (r) => (() => {
+	let o = a(r), s, c = [], l = [];
+	return class extends o {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+			s = [i({
+				attribute: "image-alignment",
+				reflect: !0
+			})], e(this, null, s, {
+				kind: "accessor",
+				name: "imageAlignment",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "imageAlignment" in e,
+					get: (e) => e.imageAlignment,
+					set: (e, t) => {
+						e.imageAlignment = t;
+					}
+				},
+				metadata: t
+			}, c, l), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		#e = t(this, c, "after");
+		get imageAlignment() {
+			return this.#e;
+		}
+		set imageAlignment(e) {
+			this.#e = e;
+		}
+		renderTemplate() {
+			return n`
+        <div class="sbb-teaser-product__root">
+          <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
+          <div class="sbb-teaser-product__container">
+            <span class="sbb-teaser-product__content">
+              <slot></slot>
+            </span>
+            <div class="sbb-teaser-product__footnote">
+              <slot name="footnote"></slot>
+            </div>
+          </div>
+        </div>
+      `;
+		}
+		constructor() {
+			super(...arguments), t(this, l);
+		}
+	};
+})();
+//#endregion
+export { o as n, s as t };

package/teaser-product.component-XY7319H9.js

@@ -0,0 +1,29 @@
+import { unsafeCSS as e } from "lit";
+import { SbbLinkBaseElement as t } from "./core/base-elements.js";
+import { boxSizingStyles as n } from "./core/styles.js";
+import { html as r } from "lit/static-html.js";
+import "./screen-reader-only.js";
+import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as a } from "./teaser-product/common/teaser-product-common.js";
+//#region src/elements/teaser-product/teaser-product/teaser-product.scss?inline
+var o = ":host{--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media(forced-colors:active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media(forced-colors:active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;inset:0}.sbb-teaser-product: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);border-radius:var(--sbb-teaser-product-border-radius)}", s = class extends i(t) {
+	static {
+		this.elementName = "sbb-teaser-product";
+	}
+	static {
+		this.styles = [
+			n,
+			a,
+			e(o)
+		];
+	}
+	render() {
+		return r`
+      <div class="sbb-teaser-product__wrapper">
+        ${this.renderLink(r`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
+        ${this.renderTemplate()}
+      </div>
+    `;
+	}
+};
+//#endregion
+export { s as t };

package/teaser-product.js

@@ -1,6 +1,6 @@
-import { n as e, t } from "./teaser-product-common-B4E35ORU.js";
+import { n as e, t } from "./teaser-product-common-B9fZrp6w.js";
 import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { t as r } from "./teaser-product.component-6A7NXDgh.js";
+import { t as r } from "./teaser-product.component-XY7319H9.js";
 import "./teaser-product.pure.js";
 r.define(), n.define();
 //#endregion

package/teaser-product.pure.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./teaser-product-common-B4E35ORU.js";
+import { n as e, t } from "./teaser-product-common-B9fZrp6w.js";
 import { SbbTeaserProductStaticElement as n } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { t as r } from "./teaser-product.component-6A7NXDgh.js";
+import { t as r } from "./teaser-product.component-XY7319H9.js";
 export { t as SbbTeaserProductCommonElementMixin, r as SbbTeaserProductElement, n as SbbTeaserProductStaticElement, e as teaserProductCommonStyle };

package/teaser.component-Drf3Eafw.js

@@ -0,0 +1,91 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbLinkBaseElement as i } from "./core/base-elements.js";
+import { boxSizingStyles as a } from "./core/styles.js";
+import { html as o } from "lit/static-html.js";
+import "./screen-reader-only.js";
+//#region src/elements/teaser/teaser.scss?inline
+var s = "@charset \"UTF-8\";:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--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-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-border-radius: var(--sbb-border-radius-4x)}@media(forced-colors:active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x)}@media(any-hover:hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:var(--sbb-cursor-pointer)}.sbb-teaser__wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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);border-radius:var(--sbb-teaser-border-radius)}@media(forced-colors:active){.sbb-teaser:focus-visible{outline-offset:calc(2 * var(--sbb-focus-outline-offset))}}@media(forced-colors:active){.sbb-teaser:before{content:\"\";position:absolute;inset:calc(-1 * var(--sbb-focus-outline-offset));pointer-events:none;border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));border:var(--sbb-border-width-1x) solid CanvasText}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-teaser-description-color);overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;display:block}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media(any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{display:inline-block;margin:0;padding:0}::slotted(sbb-chip-label){display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-title){margin-block:0}", c = (() => {
+	let c = i, l, u = [], d = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [r({ reflect: !0 })], e(this, null, l, {
+				kind: "accessor",
+				name: "alignment",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "alignment" in e,
+					get: (e) => e.alignment,
+					set: (e, t) => {
+						e.alignment = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-teaser";
+		}
+		static {
+			this.styles = [a, n(s)];
+		}
+		#e = t(this, u, "after-centered");
+		get alignment() {
+			return this.#e;
+		}
+		set alignment(e) {
+			this.#e = e;
+		}
+		_handleSlotchange() {
+			let e = Array.from(this.children).find((e) => e.localName === "sbb-chip-label");
+			e && (e.slot = "chip");
+			let t = Array.from(this.children).find((e) => e.localName === "sbb-title");
+			t && (t.slot = "title");
+		}
+		_configureChip(e) {
+			let t = e.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
+			t && (customElements.upgrade(t), t.color = "charcoal", t.size = "xxs");
+		}
+		_configureTitle(e) {
+			let t = e.target.assignedElements().find((e) => e.localName === "sbb-title");
+			t && (customElements.upgrade(t), t.visualLevel = "5");
+		}
+		render() {
+			return o`
+      <div class="sbb-teaser__wrapper">
+        ${this.renderLink(o`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`)}
+        ${this.renderContent()}
+      </div>
+    `;
+		}
+		renderContent() {
+			return o`
+      <span class="sbb-teaser__container">
+        <span class="sbb-teaser__image-wrapper">
+          <slot name="image"></slot>
+        </span>
+        <span class="sbb-teaser__text">
+          <slot name="chip" @slotchange=${this._configureChip}></slot>
+          <slot name="title" @slotchange=${this._configureTitle}></slot>
+          <p class="sbb-teaser__description">
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </p>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/teaser.js

@@ -1,4 +1,4 @@
-import { t as e } from "./teaser.component-DFIiTP5C.js";
+import { t as e } from "./teaser.component-Drf3Eafw.js";
 import "./teaser.pure.js";
 //#region src/elements/teaser.ts
 e.define();

package/teaser.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./teaser.component-DFIiTP5C.js";
+import { t as e } from "./teaser.component-Drf3Eafw.js";
 export { e as SbbTeaserElement };

package/time-input/time-input.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../time-input.component-DKFG6S5k.js";
+import { t as e } from "../time-input.component-KSyUufTP.js";
 export { e as SbbTimeInputElement };

package/{time-input.component-DKFG6S5k.js → time-input.component-KSyUufTP.js}

@@ -1,18 +1,18 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, isServer as r } from "lit";
+import { isServer as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
 import { SbbElement as a } from "./core/base-elements.js";
 import { SbbFormAssociatedInputMixin as o } from "./core/mixins.js";
 import { SbbLanguageController as s } from "./core/controllers.js";
 import { i18nTimeInputChange as c, i18nTimeInvalid as l, i18nTimeMax as u, i18nTimeMaxLength as d } from "./core/i18n.js";
 import { sbbLiveAnnouncer as f } from "./core/a11y.js";
-//#region src/elements/time-input/time-input.scss?lit&inline
-var p = n`:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media(forced-colors:active){:host{color:FieldText}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media(forced-colors:active){:host(:empty):after{color:GrayText}}`, m = /[0-9.:,\-;_hH]/, h = /[^0-9.:,\-;_hH]/g, g = /^([0-9]{1,2})([0-9]{2})$/, _ = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/, v = (() => {
-	let n = o(a), v = [], y;
-	return class extends n {
+//#region src/elements/time-input/time-input.scss?inline
+var p = ":host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media(forced-colors:active){:host{color:FieldText}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media(forced-colors:active){:host(:empty):after{color:GrayText}}", m = /[0-9.:,\-;_hH]/, h = /[^0-9.:,\-;_hH]/g, g = /^([0-9]{1,2})([0-9]{2})$/, _ = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/, v = (() => {
+	let v = o(a), y = [], b;
+	return class extends v {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			y = [i({ attribute: !1 })], e(this, null, y, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+			b = [i({ attribute: !1 })], e(this, null, b, {
 				kind: "setter",
 				name: "valueAsDate",
 				static: !1,
@@ -24,7 +24,7 @@ var p = n`:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);ma
 					}
 				},
 				metadata: t
-			}, null, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, y), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -35,10 +35,10 @@ var p = n`:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);ma
 			this.elementName = "sbb-time-input";
 		}
 		static {
-			this.styles = p;
+			this.styles = r(p);
 		}
 		set value(e) {
-			e = typeof e == "string" ? e.replace(h, "").substring(0, 5) : "", this._tryParseValue(e), !r && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+			e = typeof e == "string" ? e.replace(h, "").substring(0, 5) : "", this._tryParseValue(e), !n && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
 		}
 		get value() {
 			return super.value ?? "";
@@ -60,7 +60,7 @@ var p = n`:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);ma
 			} else return null;
 		}
 		constructor() {
-			super(), this._valueAsTime = t(this, v), this._language = new s(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => f.announce(c(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
+			super(), this._valueAsTime = t(this, y), this._language = new s(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => f.announce(c(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
 		}
 		connectedCallback() {
 			super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";

package/time-input.js

@@ -1,4 +1,4 @@
-import { t as e } from "./time-input.component-DKFG6S5k.js";
+import { t as e } from "./time-input.component-KSyUufTP.js";
 import "./time-input.pure.js";
 //#region src/elements/time-input.ts
 e.define();

package/time-input.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./time-input.component-DKFG6S5k.js";
+import { t as e } from "./time-input.component-KSyUufTP.js";
 export { e as SbbTimeInputElement };

package/timetable-form/timetable-form/timetable-form.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form.component-B6aenRP4.js";
+import { t as e } from "../../timetable-form.component-DdaSxRTK.js";
 export { e as SbbTimetableFormElement };

package/timetable-form/timetable-form-details/timetable-form-details.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form-details.component-idh3kbQa.js";
+import { t as e } from "../../timetable-form-details.component-CZp8RZSL.js";
 export { e as SbbTimetableFormDetailsElement };

package/timetable-form/timetable-form-details.js

@@ -1,4 +1,4 @@
-import { t as e } from "../timetable-form-details.component-idh3kbQa.js";
+import { t as e } from "../timetable-form-details.component-CZp8RZSL.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-details.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
 //#endregion
 export { e as SbbTimetableFormDetailsElement };

package/timetable-form/timetable-form-field/timetable-form-field.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form-field.component-BCH7PpyO.js";
+import { t as e } from "../../timetable-form-field.component-BC86joSW.js";
 export { e as SbbTimetableFormFieldElement };

package/timetable-form/timetable-form-field.js

@@ -1,4 +1,4 @@
-import { t as e } from "../timetable-form-field.component-BCH7PpyO.js";
+import { t as e } from "../timetable-form-field.component-BC86joSW.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-field.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
 //#endregion
 export { e as SbbTimetableFormFieldElement };

package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../timetable-form-swap-button.component-Cq59Nuda.js";
+import { t as e } from "../../timetable-form-swap-button.component-BhCaN83Z.js";
 export { e as SbbTimetableFormSwapButtonElement };

package/timetable-form/timetable-form-swap-button.js

@@ -1,4 +1,4 @@
-import { t as e } from "../timetable-form-swap-button.component-Cq59Nuda.js";
+import { t as e } from "../timetable-form-swap-button.component-BhCaN83Z.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-swap-button.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
 //#endregion
 export { e as SbbTimetableFormSwapButtonElement };

package/timetable-form/timetable-form.js

@@ -1,4 +1,4 @@
-import { t as e } from "../timetable-form.component-B6aenRP4.js";
+import { t as e } from "../timetable-form.component-DdaSxRTK.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/timetable-form/timetable-form.js' has been deprecated.\nUse either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.");
 //#endregion
 export { e as SbbTimetableFormElement };

package/timetable-form-details.component-CZp8RZSL.js

@@ -0,0 +1,16 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+//#region src/elements/timetable-form/timetable-form-details/timetable-form-details.scss?inline
+var r = ":host{--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;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);border-block-start:var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);padding-block:var(--sbb-timetable-form-details-padding-block);padding-inline-start:calc(var(--sbb-size-icon-ui-small) + var(--sbb-spacing-responsive-xxxs));align-items:center}::slotted(sbb-form-field){--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem}::slotted(sbb-divider[orientation=vertical]){height:var(--sbb-timetable-form-details-horizontal-divider-height)}::slotted(:last-child){margin-inline-end:var(--sbb-timetable-form-details-padding-inline)}", i = class extends n {
+	static {
+		this.elementName = "sbb-timetable-form-details";
+	}
+	static {
+		this.styles = t(r);
+	}
+	render() {
+		return e`<slot></slot>`;
+	}
+};
+//#endregion
+export { i as t };

package/timetable-form-field.component-BC86joSW.js

@@ -0,0 +1,32 @@
+import { html as e, isServer as t, unsafeCSS as n } from "lit";
+import { SbbFormFieldElement as r } from "./form-field.pure.js";
+//#region src/elements/timetable-form/timetable-form-field/timetable-form-field.scss?inline
+var i = ":host{display:flex;--sbb-form-field-border-radius: var(--sbb-border-radius-6x);--sbb-form-field-outline-offset: -.3125rem;--sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);--sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1)}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate: 90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate: -90deg;--sbb-timetable-form-field-route-icon-translate: -.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:\"\";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}.sbb-timetable-form-field__start-route-icon{align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline);rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate)}.sbb-timetable-form-field__start-route-icon:after{--connecting-line-offset: .1875rem;--connecting-line-width: calc( (var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--connecting-line-offset) );content:\"\";position:absolute;inset-block-start:50%;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--connecting-line-width);margin-left:calc(var(--connecting-line-offset) * -1)}.sbb-timetable-form-field__via-route-icon{align-self:stretch;position:relative;width:var(--sbb-size-icon-ui-small);margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__via-route-icon:before{content:\"\";position:absolute;inset-inline-start:50%;height:100%;margin-inline-start:-.0625rem;border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color)}.sbb-timetable-form-field__via-route-icon:after{content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:.4375rem;height:.4375rem;border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem}.sbb-form-field__space-wrapper{flex-grow:1}";
+//#endregion
+//#region src/elements/timetable-form/timetable-form-field/timetable-form-field.component.ts
+r.define();
+var a = class extends r {
+	static {
+		this.elementName = "sbb-timetable-form-field";
+	}
+	static {
+		this.styles = [r.styles, n(i)];
+	}
+	constructor() {
+		super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
+	}
+	connectedCallback() {
+		super.connectedCallback(), !t && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
+	}
+	render() {
+		return e`
+      ${this._routeIcon ? e` <sbb-icon
+            name="route-circle-start-small"
+            class="sbb-timetable-form-field__start-route-icon"
+          ></sbb-icon>` : e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
+      ${super.render()}
+    `;
+	}
+};
+//#endregion
+export { a as t };

package/{timetable-form-swap-button.component-Cq59Nuda.js → timetable-form-swap-button.component-BhCaN83Z.js}

@@ -1,9 +1,9 @@
-import { css as e } from "lit";
+import { unsafeCSS as e } from "lit";
 import { SbbSecondaryButtonElement as t } from "./button.pure.js";
 import { SbbLanguageController as n } from "./core/controllers.js";
 import { i18nTimetableFormSwapButtonLabel as r } from "./core/i18n.js";
-//#region src/elements/timetable-form/timetable-form-swap-button/timetable-form-swap-button.scss?lit&inline
-var i = e`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end: var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate: 0 -50%;--sbb-timetable-form-swap-button-z-index: 1;--sbb-timetable-form-swap-button-position: absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position, relative);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);inset-inline-end:0}`;
+//#region src/elements/timetable-form/timetable-form-swap-button/timetable-form-swap-button.scss?inline
+var i = ":host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end: var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate: 0 -50%;--sbb-timetable-form-swap-button-z-index: 1;--sbb-timetable-form-swap-button-position: absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position, relative);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);inset-inline-end:0}";
 //#endregion
 //#region src/elements/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.ts
 t.define();
@@ -12,7 +12,7 @@ var a = class extends t {
 		this.elementName = "sbb-timetable-form-swap-button";
 	}
 	static {
-		this.styles = [t.styles, i];
+		this.styles = [t.styles, e(i)];
 	}
 	constructor() {
 		super(), this._languageController = new n(this), this.addEventListener("click", () => this._invertFieldValues());

package/timetable-form.component-DdaSxRTK.js

@@ -0,0 +1,16 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+//#region src/elements/timetable-form/timetable-form/timetable-form.scss?inline
+var r = ":host{--sbb-timetable-form-background-color: var(--sbb-background-color-1);--sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);display:flex;flex-direction:column}", i = class extends n {
+	static {
+		this.elementName = "sbb-timetable-form";
+	}
+	static {
+		this.styles = t(r);
+	}
+	render() {
+		return e`<slot></slot>`;
+	}
+};
+//#endregion
+export { i as t };

package/timetable-form.js

@@ -1,7 +1,7 @@
-import { t as e } from "./timetable-form-details.component-idh3kbQa.js";
-import { t } from "./timetable-form-field.component-BCH7PpyO.js";
-import { t as n } from "./timetable-form-swap-button.component-Cq59Nuda.js";
-import { t as r } from "./timetable-form.component-B6aenRP4.js";
+import { t as e } from "./timetable-form-details.component-CZp8RZSL.js";
+import { t } from "./timetable-form-field.component-BC86joSW.js";
+import { t as n } from "./timetable-form-swap-button.component-BhCaN83Z.js";
+import { t as r } from "./timetable-form.component-DdaSxRTK.js";
 import "./timetable-form.pure.js";
 r.define(), e.define(), t.define(), n.define();
 //#endregion

package/timetable-form.pure.js

@@ -1,5 +1,5 @@
-import { t as e } from "./timetable-form-details.component-idh3kbQa.js";
-import { t } from "./timetable-form-field.component-BCH7PpyO.js";
-import { t as n } from "./timetable-form-swap-button.component-Cq59Nuda.js";
-import { t as r } from "./timetable-form.component-B6aenRP4.js";
+import { t as e } from "./timetable-form-details.component-CZp8RZSL.js";
+import { t } from "./timetable-form-field.component-BC86joSW.js";
+import { t as n } from "./timetable-form-swap-button.component-BhCaN83Z.js";
+import { t as r } from "./timetable-form.component-DdaSxRTK.js";
 export { e as SbbTimetableFormDetailsElement, r as SbbTimetableFormElement, t as SbbTimetableFormFieldElement, n as SbbTimetableFormSwapButtonElement };

package/timetable-occupancy/timetable-occupancy.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../timetable-occupancy.component-DCLvWyrU.js";
+import { t as e } from "../timetable-occupancy.component-BXuU3o7A.js";
 export { e as SbbTimetableOccupancyElement };

package/timetable-occupancy-icon/timetable-occupancy-icon.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../timetable-occupancy-icon.component-zS3QXqCK.js";
+import { t as e } from "../timetable-occupancy-icon.component-uluD8AMi.js";
 export { e as SbbTimetableOccupancyIconElement };