@sbb-esta/lyne-elements-dev 4.7.0-dev.1773148895 → 4.7.0-dev.1773157346

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

@@ -1,20 +1,20 @@
-var c = (e) => {
-  throw TypeError(e);
+var d = (t) => {
+  throw TypeError(t);
 };
-var g = (e, t, a) => t.has(e) || c("Cannot " + a);
-var u = (e, t, a) => (g(e, t, "read from private field"), a ? a.call(e) : t.get(e)), b = (e, t, a) => t.has(e) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), d = (e, t, a, r) => (g(e, t, "write to private field"), r ? r.call(e, a) : t.set(e, a), a);
-import { __esDecorate as f, __runInitializers as _ } from "tslib";
-import { html as v } from "lit";
-import { property as A } from "lit/decorators.js";
-import { SbbNegativeMixin as h } from "../../core/mixins.js";
-const j = (e) => (() => {
-  var s, i;
-  let a = h(e), r, m = [], l = [];
-  return i = class extends a {
+var l = (t, e, r) => e.has(t) || d("Cannot " + r);
+var u = (t, e, r) => (l(t, e, "read from private field"), r ? r.call(t) : e.get(t)), p = (t, e, r) => e.has(t) ? d("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), g = (t, e, r, a) => (l(t, e, "write to private field"), a ? a.call(t, r) : e.set(t, r), r);
+import { __esDecorate as f, __runInitializers as m } from "tslib";
+import { css as _, html as h } from "lit";
+import { property as k } from "lit/decorators.js";
+import { SbbNegativeMixin as x } from "../../core/mixins.js";
+const P = _`: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)}}`, T = (t) => (() => {
+  var s, o;
+  let r = x(t), a, n = [], c = [];
+  return o = class extends r {
     constructor() {
       super(...arguments);
-      b(this, s, _(this, m, "after"));
-      _(this, l);
+      p(this, s, m(this, n, "after"));
+      m(this, c);
     }
     /**
      * Whether the fully visible part of the image is aligned 'before' or 'after' the content.
@@ -23,11 +23,11 @@ const j = (e) => (() => {
     get imageAlignment() {
       return u(this, s);
     }
-    set imageAlignment(n) {
-      d(this, s, n);
+    set imageAlignment(b) {
+      g(this, s, b);
     }
     renderTemplate() {
-      return v`
+      return h`
         <div class="sbb-teaser-product__root">
           <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
           <div class="sbb-teaser-product__container">
@@ -42,12 +42,13 @@ const j = (e) => (() => {
       `;
     }
   }, s = new WeakMap(), (() => {
-    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    r = [A({ attribute: "image-alignment", reflect: !0 })], f(i, null, r, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (o) => "imageAlignment" in o, get: (o) => o.imageAlignment, set: (o, p) => {
-      o.imageAlignment = p;
-    } }, metadata: n }, m, l), n && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
-  })(), i;
+    const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    a = [k({ attribute: "image-alignment", reflect: !0 })], f(o, null, a, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (i) => "imageAlignment" in i, get: (i) => i.imageAlignment, set: (i, v) => {
+      i.imageAlignment = v;
+    } }, metadata: b }, n, c), b && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
+  })(), o;
 })();
 export {
-  j as SbbTeaserProductCommonElementMixin
+  T as SbbTeaserProductCommonElementMixin,
+  P as teaserProductCommonStyle
 };

package/teaser-product/common.js

@@ -1,6 +1,7 @@
-import { SbbTeaserProductCommonElementMixin as r } from "./common/teaser-product-common.js";
-import { t as m } from "../teaser-product-common-DwaWdQEh.js";
+import { SbbTeaserProductCommonElementMixin as s, teaserProductCommonStyle as r } from "./common/teaser-product-common.js";
+console.warn(`The entrypoint '@sbb-esta/elements/teaser-product/common.js' has been deprecated.
+Use either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.`);
 export {
-  r as SbbTeaserProductCommonElementMixin,
-  m as teaserProductCommonStyle
+  s as SbbTeaserProductCommonElementMixin,
+  r as teaserProductCommonStyle
 };

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

@@ -1,36 +1,28 @@
-import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { customElement as n } from "lit/decorators.js";
-import { html as i } from "lit/static-html.js";
-import { SbbLinkBaseElement as u } from "../../core/base-elements.js";
-import { boxSizingStyles as d } from "../../core/styles.js";
-import { SbbTeaserProductCommonElementMixin as m, teaserProductCommonStyle as p } from "../common.js";
-import { css as f } from "lit";
+import { html as e } from "lit/static-html.js";
+import { SbbLinkBaseElement as o } from "../../core/base-elements.js";
+import { boxSizingStyles as s } from "../../core/styles.js";
+import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as b } from "../common/teaser-product-common.js";
+import { css as a } from "lit";
 import "../../screen-reader-only.js";
-const v = f`: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)}`;
-let E = (() => {
-  var t;
-  let l = [n("sbb-teaser-product")], o, s = [], e, a = m(u);
-  return t = class extends a {
-    render() {
-      return i`
+const n = a`: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)}`, r = class r extends i(o) {
+  render() {
+    return e`
       <div class="sbb-teaser-product__wrapper">
         ${this.renderLink(
-        // For SEO, we add the accessibility hidden as hidden content of the link
-        i`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
-      )}
+      // For SEO, we add the accessibility hidden as hidden content of the link
+      e`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+    )}
         ${this.renderTemplate()}
       </div>
     `;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    b(null, o = { value: e }, l, { kind: "class", name: e.name, metadata: r }, null, s), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = [
-    d,
-    p,
-    v
-  ], c(e, s), e;
-})();
+  }
+};
+r.elementName = "sbb-teaser-product", r.styles = [
+  s,
+  b,
+  n
+];
+let t = r;
 export {
-  E as SbbTeaserProductElement
+  t as SbbTeaserProductElement
 };

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

@@ -1,17 +1,10 @@
-import { __esDecorate as i, __runInitializers as m } from "tslib";
-import { customElement as c } from "lit/decorators.js";
-import { SbbActionBaseElement as n } from "../../core/base-elements.js";
-import { boxSizingStyles as u } from "../../core/styles.js";
-import { SbbTeaserProductCommonElementMixin as b, teaserProductCommonStyle as d } from "../common.js";
-let x = (() => {
-  var e;
-  let o = [c("sbb-teaser-product-static")], r, s = [], t, l = b(n);
-  return e = class extends l {
-  }, t = e, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    i(null, r = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, s), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), e.styles = [u, d], m(t, s), t;
-})();
+import { SbbActionBaseElement as t } from "../../core/base-elements.js";
+import { boxSizingStyles as m } from "../../core/styles.js";
+import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as e } from "../common/teaser-product-common.js";
+const o = class o extends i(t) {
+};
+o.elementName = "sbb-teaser-product-static", o.styles = [m, e];
+let s = o;
 export {
-  x as SbbTeaserProductStaticElement
+  s as SbbTeaserProductStaticElement
 };

package/teaser-product/teaser-product-static.js

@@ -1,4 +1,7 @@
-import { SbbTeaserProductStaticElement as r } from "./teaser-product-static/teaser-product-static.component.js";
+import { SbbTeaserProductStaticElement as e } from "./teaser-product-static/teaser-product-static.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/teaser-product/teaser-product-static.js' has been deprecated.
+Use either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.`);
 export {
-  r as SbbTeaserProductStaticElement
+  e as SbbTeaserProductStaticElement
 };

package/teaser-product/teaser-product.js

@@ -1,4 +1,7 @@
-import { SbbTeaserProductElement as o } from "./teaser-product/teaser-product.component.js";
+import { SbbTeaserProductElement as e } from "./teaser-product/teaser-product.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/teaser-product/teaser-product.js' has been deprecated.
+Use either '@sbb-esta/elements/teaser-product.js' or '@sbb-esta/elements/teaser-product.pure.js' instead.`);
 export {
-  o as SbbTeaserProductElement
+  e as SbbTeaserProductElement
 };

package/teaser-product.js

@@ -1,10 +1,11 @@
-import { SbbTeaserProductElement as r } from "./teaser-product/teaser-product/teaser-product.component.js";
-import { SbbTeaserProductStaticElement as m } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
-import { SbbTeaserProductCommonElementMixin as b } from "./teaser-product/common/teaser-product-common.js";
-import { t as c } from "./teaser-product-common-DwaWdQEh.js";
+import { SbbTeaserProductCommonElementMixin as i, teaserProductCommonStyle as b } from "./teaser-product/common/teaser-product-common.js";
+import { SbbTeaserProductStaticElement as e } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
+import { SbbTeaserProductElement as o } from "./teaser-product/teaser-product/teaser-product.component.js";
+o.define();
+e.define();
 export {
-  b as SbbTeaserProductCommonElementMixin,
-  r as SbbTeaserProductElement,
-  m as SbbTeaserProductStaticElement,
-  c as teaserProductCommonStyle
+  i as SbbTeaserProductCommonElementMixin,
+  o as SbbTeaserProductElement,
+  e as SbbTeaserProductStaticElement,
+  b as teaserProductCommonStyle
 };

package/teaser-product.pure.js

@@ -0,0 +1,9 @@
+import { SbbTeaserProductCommonElementMixin as r, teaserProductCommonStyle as t } from "./teaser-product/common/teaser-product-common.js";
+import { SbbTeaserProductStaticElement as b } from "./teaser-product/teaser-product-static/teaser-product-static.component.js";
+import { SbbTeaserProductElement as a } from "./teaser-product/teaser-product/teaser-product.component.js";
+export {
+  r as SbbTeaserProductCommonElementMixin,
+  a as SbbTeaserProductElement,
+  b as SbbTeaserProductStaticElement,
+  t as teaserProductCommonStyle
+};

package/teaser.js

@@ -1,4 +1,5 @@
-import { SbbTeaserElement as b } from "./teaser/teaser.component.js";
+import { SbbTeaserElement as e } from "./teaser/teaser.component.js";
+e.define();
 export {
-  b as SbbTeaserElement
+  e as SbbTeaserElement
 };

package/teaser.pure.js

@@ -0,0 +1,4 @@
+import { SbbTeaserElement as b } from "./teaser/teaser.component.js";
+export {
+  b as SbbTeaserElement
+};

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

@@ -1,21 +1,22 @@
-import { __esDecorate as c, __runInitializers as h } from "tslib";
-import { css as f, LitElement as v, isServer as p } from "lit";
-import { customElement as g, property as b } from "lit/decorators.js";
-import { sbbLiveAnnouncer as m } from "../core/a11y.js";
-import { SbbLanguageController as A } from "../core/controllers.js";
-import { i18nTimeInputChange as T, i18nTimeInvalid as y, i18nTimeMax as D, i18nTimeMaxLength as E } from "../core/i18n.js";
-import { SbbFormAssociatedInputMixin as V } from "../core/mixins.js";
-const w = f`: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}}`, S = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, x = /^([0-9]{1,2})([0-9]{2})$/, C = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let M = (() => {
+import { __esDecorate as u, __runInitializers as h } from "tslib";
+import { css as c, isServer as m } from "lit";
+import { property as d } from "lit/decorators.js";
+import { sbbLiveAnnouncer as n } from "../core/a11y.js";
+import { SbbElement as f } from "../core/base-elements.js";
+import { SbbLanguageController as v } from "../core/controllers.js";
+import { i18nTimeInputChange as _, i18nTimeInvalid as p, i18nTimeMax as g, i18nTimeMaxLength as b } from "../core/i18n.js";
+import { SbbFormAssociatedInputMixin as A } from "../core/mixins.js";
+const y = c`: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}}`, T = /[0-9.:,\-;_hH]/, o = /[^0-9.:,\-;_hH]/g, D = /^([0-9]{1,2})([0-9]{2})$/, V = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let R = (() => {
   var a;
-  let _ = [g("sbb-time-input")], r, l = [], s, n = V(v), u = [], o;
-  return a = class extends n {
+  let i = A(f), r = [], l;
+  return a = class extends i {
     /**
      * The value of the time input. Reflects the current text value
      * of this input.
      */
     set value(e) {
-      e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !p && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+      e = typeof e == "string" ? e.replace(o, "").substring(0, 5) : "", this._tryParseValue(e), !m && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
     }
     get value() {
       return super.value ?? "";
@@ -40,7 +41,7 @@ let M = (() => {
         return null;
     }
     constructor() {
-      super(), this._valueAsTime = h(this, u), this._language = new A(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => m.announce(T(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
+      super(), this._valueAsTime = h(this, r), this._language = new v(this), this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 }), this.addEventListener?.("change", () => n.announce(_(this.value)[this._language.current])), this.addEventListener?.("keydown", (e) => this._preventCharInsert(e));
     }
     connectedCallback() {
       super.connectedCallback(), this.inputMode ||= "numeric", this.placeholder ||= "HH:MM";
@@ -61,8 +62,8 @@ let M = (() => {
       const t = e?.trim();
       if (!t)
         return null;
-      const i = t.match(x) ?? t.match(C);
-      return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
+      const s = t.match(D) ?? t.match(V);
+      return s ? { hours: +s[1] || 0, minutes: +s[2] || 0 } : null;
     }
     _updateValueDateFormat() {
       if (this.valueAsDate) {
@@ -74,17 +75,17 @@ let M = (() => {
       const e = this.valueAsDate;
       if (!e)
         return "";
-      const t = String(e.getHours()).padStart(2, "0"), i = String(e.getMinutes()).padStart(2, "0");
-      return `${t}:${i}`;
+      const t = String(e.getHours()).padStart(2, "0"), s = String(e.getMinutes()).padStart(2, "0");
+      return `${t}:${s}`;
     }
     preparePastedText(e) {
-      return e.replace(d, "").substring(0, 5 - (this.textContent?.length ?? 0));
+      return e.replace(o, "").substring(0, 5 - (this.textContent?.length ?? 0));
     }
     shouldValidate(e) {
       return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
     }
     validate() {
-      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", D[this.language.current]) : this.setValidityFlag("badInput", y[this.language.current]) : this._removeValidityErrors();
+      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", g[this.language.current]) : this.setValidityFlag("badInput", p[this.language.current]) : this._removeValidityErrors();
     }
     _removeValidityErrors() {
       ["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
@@ -109,19 +110,19 @@ let M = (() => {
         "PageDown",
         "Delete"
       ];
-      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || S.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(E[this._language.current]));
+      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || T.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && n.announce(b[this._language.current]));
     }
     _hasSelection() {
       const e = window.getSelection()?.getRangeAt(0);
       return !!e && e.startOffset !== e.endOffset;
     }
-  }, s = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    o = [b({ attribute: !1 })], c(a, null, o, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, i) => {
-      t.valueAsDate = i;
-    } }, metadata: e }, null, u), c(null, r = { value: s }, _, { kind: "class", name: s.name, metadata: e }, null, l), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = w, h(s, l), s;
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    l = [d({ attribute: !1 })], u(a, null, l, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, s) => {
+      t.valueAsDate = s;
+    } }, metadata: e }, null, r), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.elementName = "sbb-time-input", a.styles = y, a;
 })();
 export {
-  M as SbbTimeInputElement
+  R as SbbTimeInputElement
 };

package/time-input.js

@@ -1,4 +1,5 @@
-import { SbbTimeInputElement as t } from "./time-input/time-input.component.js";
+import { SbbTimeInputElement as e } from "./time-input/time-input.component.js";
+e.define();
 export {
-  t as SbbTimeInputElement
+  e as SbbTimeInputElement
 };

package/time-input.pure.js

@@ -0,0 +1,4 @@
+import { SbbTimeInputElement as t } from "./time-input/time-input.component.js";
+export {
+  t as SbbTimeInputElement
+};

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

@@ -1,19 +1,12 @@
-import { __esDecorate as b, __runInitializers as i } from "tslib";
-import { css as m, LitElement as c, html as n } from "lit";
-import { customElement as u } from "lit/decorators.js";
-const d = m`: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}`;
-let y = (() => {
-  var t;
-  let s = [u("sbb-timetable-form")], a, l = [], e, o = c;
-  return t = class extends o {
-    render() {
-      return n`<slot></slot>`;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, a = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, l), e = a.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = d, i(e, l), e;
-})();
+import { css as s, html as t } from "lit";
+import { SbbElement as b } from "../../core/base-elements.js";
+const a = s`: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}`, r = class r extends b {
+  render() {
+    return t`<slot></slot>`;
+  }
+};
+r.elementName = "sbb-timetable-form", r.styles = a;
+let o = r;
 export {
-  y as SbbTimetableFormElement
+  o as SbbTimetableFormElement
 };

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

@@ -1,19 +1,12 @@
-import { __esDecorate as b, __runInitializers as o } from "tslib";
-import { css as d, LitElement as n, html as m } from "lit";
-import { customElement as c } from "lit/decorators.js";
-const f = d`: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)}`;
-let g = (() => {
-  var t;
-  let l = [c("sbb-timetable-form-details")], i, s = [], e, r = n;
-  return t = class extends r {
-    render() {
-      return m`<slot></slot>`;
-    }
-  }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    b(null, i = { value: e }, l, { kind: "class", name: e.name, metadata: a }, null, s), e = i.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), t.styles = f, o(e, s), e;
-})();
+import { css as e, html as r } from "lit";
+import { SbbElement as t } from "../../core/base-elements.js";
+const a = e`: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 i extends t {
+  render() {
+    return r`<slot></slot>`;
+  }
+};
+i.elementName = "sbb-timetable-form-details", i.styles = a;
+let s = i;
 export {
-  g as SbbTimetableFormDetailsElement
+  s as SbbTimetableFormDetailsElement
 };

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

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

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

@@ -1,32 +1,26 @@
-import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { css as f, isServer as m, html as i } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbFormFieldElement as l } from "../../form-field/form-field.js";
-const u = f`: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}`;
-let g = (() => {
-  var t;
-  let n = [d("sbb-timetable-form-field")], o, a = [], e, s = l;
-  return t = class extends s {
-    constructor() {
-      super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
-    }
-    connectedCallback() {
-      super.connectedCallback(), !m && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
-    }
-    render() {
-      return i`
-      ${this._routeIcon ? i` <sbb-icon
+import { css as o, isServer as s, html as t } from "lit";
+import { SbbFormFieldElement as r } from "../../form-field.pure.js";
+const n = o`: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}`;
+r.define();
+const e = class e extends r {
+  constructor() {
+    super(), this._routeIcon = !1, this.borderless = !0, this.floatingLabel = !0, this.width = "collapse", this.size = "l";
+  }
+  connectedCallback() {
+    super.connectedCallback(), !s && this.hydrationComplete.then(() => this._routeIcon = this.matches(":first-of-type, :last-of-type"));
+  }
+  render() {
+    return t`
+      ${this._routeIcon ? t` <sbb-icon
             name="route-circle-start-small"
             class="sbb-timetable-form-field__start-route-icon"
-          ></sbb-icon>` : i` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
+          ></sbb-icon>` : t` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
       ${super.render()}
     `;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    b(null, o = { value: e }, n, { kind: "class", name: e.name, metadata: r }, null, a), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = [l.styles, u], c(e, a), e;
-})();
+  }
+};
+e.elementName = "sbb-timetable-form-field", e.styles = [r.styles, n];
+let i = e;
 export {
-  g as SbbTimetableFormFieldElement
+  i as SbbTimetableFormFieldElement
 };

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

@@ -1,4 +1,7 @@
-import { SbbTimetableFormFieldElement as b } from "./timetable-form-field/timetable-form-field.component.js";
+import { SbbTimetableFormFieldElement as e } from "./timetable-form-field/timetable-form-field.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/timetable-form/timetable-form-field.js' has been deprecated.
+Use either '@sbb-esta/elements/timetable-form.js' or '@sbb-esta/elements/timetable-form.pure.js' instead.`);
 export {
-  b as SbbTimetableFormFieldElement
+  e as SbbTimetableFormFieldElement
 };

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

@@ -1,41 +1,33 @@
-import { __esDecorate as p, __runInitializers as f } from "tslib";
-import { customElement as d } from "lit/decorators.js";
-import { SbbSecondaryButtonElement as m } from "../../button/secondary-button.js";
-import { SbbLanguageController as v } from "../../core/controllers.js";
-import { i18nTimetableFormSwapButtonLabel as h } from "../../core/i18n.js";
-import { css as w } from "lit";
-const g = w`: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}`;
-let z = (() => {
-  var a;
-  let u = [d("sbb-timetable-form-swap-button")], l, i = [], e, o = m;
-  return a = class extends o {
-    constructor() {
-      super(), this._languageController = new v(this), this.addEventListener("click", () => this._invertFieldValues());
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.toggleState("timetable-form-context", !!this.closest("sbb-timetable-form"));
-    }
-    willUpdate(t) {
-      super.willUpdate(t), this.internals.ariaLabel = h[this._languageController.current];
-    }
-    /**
-     * Search for `sbb-timetable-form-field` inputs, invert their values and dispatch the respective input and change events
-     */
-    _invertFieldValues() {
-      const t = this.closest("sbb-timetable-form"), b = Array.from(t?.querySelectorAll("sbb-timetable-form-field") || []), r = b.map((n) => n.inputElement?.value);
-      !t || r.length === 0 || r.every((n) => !n) || r.reverse().forEach((n, c) => {
-        const s = b[c].inputElement;
-        s instanceof HTMLInputElement && (s.value = n, s.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), s.dispatchEvent(new Event("change", { bubbles: !0 })));
-      });
-    }
-    renderIconName() {
-      return super.renderIconName() || "arrow-change-small";
-    }
-  }, e = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    p(null, l = { value: e }, u, { kind: "class", name: e.name, metadata: t }, null, i), e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = [m.styles, g], f(e, i), e;
-})();
+import { SbbSecondaryButtonElement as r } from "../../button/secondary-button.js";
+import { SbbLanguageController as b } from "../../core/controllers.js";
+import { i18nTimetableFormSwapButtonLabel as m } from "../../core/i18n.js";
+import { css as u } from "lit";
+const c = u`: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}`, s = class s extends r {
+  constructor() {
+    super(), this._languageController = new b(this), this.addEventListener("click", () => this._invertFieldValues());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.toggleState("timetable-form-context", !!this.closest("sbb-timetable-form"));
+  }
+  willUpdate(e) {
+    super.willUpdate(e), this.internals.ariaLabel = m[this._languageController.current];
+  }
+  /**
+   * Search for `sbb-timetable-form-field` inputs, invert their values and dispatch the respective input and change events
+   */
+  _invertFieldValues() {
+    const e = this.closest("sbb-timetable-form"), i = Array.from(e?.querySelectorAll("sbb-timetable-form-field") || []), a = i.map((t) => t.inputElement?.value);
+    !e || a.length === 0 || a.every((t) => !t) || a.reverse().forEach((t, l) => {
+      const n = i[l].inputElement;
+      n instanceof HTMLInputElement && (n.value = t, n.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), n.dispatchEvent(new Event("change", { bubbles: !0 })));
+    });
+  }
+  renderIconName() {
+    return super.renderIconName() || "arrow-change-small";
+  }
+};
+s.elementName = "sbb-timetable-form-swap-button", s.styles = [r.styles, c];
+let o = s;
 export {
-  z as SbbTimetableFormSwapButtonElement
+  o as SbbTimetableFormSwapButtonElement
 };