@sbb-esta/lyne-elements 2.6.0 → 2.7.0

package/teaser.js

@@ -1,102 +1,4 @@
-var D = (t) => {
-  throw TypeError(t);
-};
-var j = (t, s, i) => s.has(t) || D("Cannot " + i);
-var v = (t, s, i) => (j(t, s, "read from private field"), i ? i.call(t) : s.get(t)), p = (t, s, i) => s.has(t) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), m = (t, s, i, o) => (j(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
-import { __esDecorate as f, __runInitializers as l } from "tslib";
-import { customElement as B, property as _ } from "lit/decorators.js";
-import { html as u } from "lit/static-html.js";
-import { SbbLinkBaseElement as F } from "./core/base-elements.js";
-import { slotState as H, forceType as O, omitEmptyConverter as P } from "./core/decorators.js";
-import { css as U } from "lit";
-import "./chip-label.js";
-import "./screen-reader-only.js";
-import "./title.js";
-const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--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);--sbb-teaser-width: 100%}@media (any-hover: hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;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;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.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{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)}@media (any-hover: hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip-label{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip-label{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:inline-block;color:var(--sbb-teaser-description-color)}`;
-let Y = (() => {
-  var b, c, d, h, r;
-  let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, k = [], z = [], L, S = [], T = [], I, $ = [], E = [];
-  return r = class extends g {
-    constructor() {
-      super(...arguments);
-      p(this, b, l(this, x, "after-centered"));
-      p(this, c, (l(this, y), l(this, k, "5")));
-      p(this, d, (l(this, z), l(this, S, "")));
-      p(this, h, (l(this, T), l(this, $, "")));
-      l(this, E);
-    }
-    /** Teaser variant - define the position and the alignment of the text block. */
-    get alignment() {
-      return v(this, b);
-    }
-    set alignment(a) {
-      m(this, b, a);
-    }
-    /** Heading level of the sbb-title element (e.g. h1-h6). */
-    get titleLevel() {
-      return v(this, c);
-    }
-    set titleLevel(a) {
-      m(this, c, a);
-    }
-    /** Content of title. */
-    get titleContent() {
-      return v(this, d);
-    }
-    set titleContent(a) {
-      m(this, d, a);
-    }
-    /** Content of chip label. */
-    get chipContent() {
-      return v(this, h);
-    }
-    set chipContent(a) {
-      m(this, h, a);
-    }
-    render() {
-      return u`
-      <div class="sbb-teaser__wrapper">
-        ${this.renderLink(
-        // For SEO we add the accessibility hidden as hidden content of the link
-        u`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
-      )}
-        ${this.renderContent()}
-      </div>
-    `;
-    }
-    renderContent() {
-      return u`
-      <span class="sbb-teaser__container">
-        <span class="sbb-teaser__image-wrapper">
-          <slot name="image"></slot>
-        </span>
-        <span class="sbb-teaser__text">
-          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip-label">
-            <slot name="chip">${this.chipContent}</slot>
-          </sbb-chip-label>
-          <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
-            <slot name="title">${this.titleContent}</slot>
-          </sbb-title>
-          <span class="sbb-teaser__description">
-            <slot></slot>
-          </span>
-        </span>
-      </span>
-    `;
-    }
-  }, b = new WeakMap(), c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = r, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, n) => {
-      e.alignment = n;
-    } }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, n) => {
-      e.titleLevel = n;
-    } }, metadata: a }, k, z), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, n) => {
-      e.titleContent = n;
-    } }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, n) => {
-      e.chipContent = n;
-    } }, metadata: a }, $, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), r.styles = q, l(o, i), o;
-})();
+import { SbbTeaserElement as b } from "./teaser/teaser.js";
 export {
-  Y as SbbTeaserElement
+  b as SbbTeaserElement
 };

package/time-input/time-input.js

@@ -0,0 +1,174 @@
+var T = (n) => {
+  throw TypeError(n);
+};
+var V = (n, s, a) => s.has(n) || T("Cannot " + a);
+var E = (n, s, a) => (V(n, s, "read from private field"), a ? a.call(n) : s.get(n)), g = (n, s, a) => s.has(n) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, u) => (V(n, s, "write to private field"), u ? u.call(n, a) : s.set(n, a), a);
+import { __runInitializers as m, __esDecorate as b } from "tslib";
+import { css as x, LitElement as H, isServer as R, html as M } from "lit";
+import { customElement as U, property as L, state as z } from "lit/decorators.js";
+import { ref as $ } from "lit/directives/ref.js";
+import { SbbIdReferenceController as P, SbbLanguageController as G } from "../core/controllers.js";
+import { EventEmitter as O, forwardEvent as k } from "../core/eventing.js";
+import { i18nTimeInputChange as j } from "../core/i18n.js";
+const q = x`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, K = /[0-9.:,\-;_hH]/, W = /^([0-9]{1,2})([0-9]{2})$/, X = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let it = (() => {
+  var p, h, r;
+  let n = [U("sbb-time-input")], s, a = [], u, f = H, C = [], v, A = [], w = [], y, I = [], D = [], S;
+  var _ = (r = class extends f {
+    constructor() {
+      super(...arguments);
+      g(this, p);
+      g(this, h);
+      c(this, p, (m(this, C), m(this, A, null))), c(this, h, (m(this, w), m(this, I, null))), this._didChange = (m(this, D), new O(this, _.events.didChange, {
+        bubbles: !0,
+        cancelable: !0
+      })), this._validationChange = new O(this, _.events.validationChange, {
+        bubbles: !0,
+        composed: !1
+      }), this._inputAbortController = new AbortController(), this._inputIdReferenceController = new P(this, "input"), this._language = new G(this);
+    }
+    // TODO: Replace HTMLElement by HTMLInputElement
+    /** Reference of the native input connected to the datepicker. */
+    get input() {
+      return E(this, p);
+    }
+    set input(t) {
+      c(this, p, t);
+    }
+    get _inputElement() {
+      return E(this, h);
+    }
+    set _inputElement(t) {
+      c(this, h, t);
+    }
+    /** Formats the current input's value as date. */
+    set valueAsDate(t) {
+      if (!t || !this._inputElement)
+        return;
+      const e = t instanceof Date ? t : new Date(t);
+      this._inputElement.value = this._formatValue({
+        hours: e.getHours(),
+        minutes: e.getMinutes()
+      }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
+    }
+    get valueAsDate() {
+      var t;
+      return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._configureInputElement();
+    }
+    disconnectedCallback() {
+      var t;
+      super.disconnectedCallback(), (t = this._inputAbortController) == null || t.abort(), this._inputElement = null;
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), !R && (!t || t === "input") && this.hasUpdated && this._configureInputElement();
+    }
+    _configureInputElement() {
+      var e, i, l, d;
+      const t = this.input instanceof HTMLInputElement ? this.input : this._inputIdReferenceController.find() ?? ((i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) == null ? void 0 : i.querySelector("input")) ?? null;
+      t !== this._inputElement && ((l = this._inputAbortController) == null || l.abort(), (d = this._inputElement) == null || d.removeAttribute("data-sbb-time-input"), this._inputElement = t, this._inputElement && (this._updateValue(this._inputElement.value), this._inputAbortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (o) => k(o, this), {
+        signal: this._inputAbortController.signal
+      }), this._inputElement.addEventListener("keydown", (o) => this._preventCharInsert(o), { signal: this._inputAbortController.signal }), this._inputElement.addEventListener("change", (o) => this._updateValue(o.target.value), {
+        signal: this._inputAbortController.signal,
+        capture: !0
+      }), this._inputElement.addEventListener("change", (o) => {
+        this._emitChange(o), this._updateAccessibilityMessage();
+      }, {
+        signal: this._inputAbortController.signal
+      })));
+    }
+    /**
+     * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
+     * to force the input change when the typed value is the same of the current one.
+     */
+    _updateValue(t) {
+      if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
+        return;
+      const e = this._parseInput(t), i = !!e && this._isTimeValid(e), l = !t || t.trim() === "" || i;
+      l && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
+      const d = !this._inputElement.hasAttribute("data-sbb-invalid");
+      this._inputElement.toggleAttribute("data-sbb-invalid", !l), d !== l && this._validationChange.emit({ valid: l });
+    }
+    /** Emits the change event. */
+    _emitChange(t) {
+      k(t, this), this._didChange.emit();
+    }
+    /** Returns the right format for the `value` property. */
+    _formatValue(t) {
+      const e = String(t.hours).padStart(2, "0"), i = String(t.minutes).padStart(2, "0");
+      return `${e}:${i}`;
+    }
+    /**
+     * Returns the right format for the `valueAsDate` property:
+     * sets the start date at 01.01.1970, then adds the typed hours/minutes.
+     */
+    _formatValueAsDate(t) {
+      return !t || !this._isTimeValid(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
+    }
+    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
+    _isTimeValid(t) {
+      return t.hours < 24 && t.minutes < 60;
+    }
+    /** Validate input against the defined RegExps. */
+    _parseInput(t) {
+      const e = t == null ? void 0 : t.trim();
+      if (!e)
+        return null;
+      const i = e.match(W);
+      if (i)
+        return { hours: +i[1] || 0, minutes: +i[2] || 0 };
+      const l = e.match(X);
+      return l ? { hours: +l[1] || 0, minutes: +l[2] || 0 } : null;
+    }
+    /**  Only allow typing numbers and separator keys. */
+    _preventCharInsert(t) {
+      const e = [
+        "Backspace",
+        "Tab",
+        "Enter",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Delete"
+      ];
+      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !K.test(t.key) && t.preventDefault();
+    }
+    // We use a programmatic approach to avoid initial setting the message
+    // and to not immediately change output if language should change (no reason to read out message).
+    _updateAccessibilityMessage() {
+      var e;
+      this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${j[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
+    }
+    render() {
+      return M`
+      <p
+        role="status"
+        ${$((t) => this._statusContainer = t)}
+      ></p>
+    `;
+    }
+  }, p = new WeakMap(), h = new WeakMap(), u = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    v = [L()], y = [z()], S = [L({ attribute: !1 })], b(r, null, v, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, i) => {
+      e.input = i;
+    } }, metadata: t }, A, w), b(r, null, y, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
+      e._inputElement = i;
+    } }, metadata: t }, I, D), b(r, null, S, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
+      e.valueAsDate = i;
+    } }, metadata: t }, null, C), b(null, s = { value: u }, n, { kind: "class", name: u.name, metadata: t }, null, a), _ = u = s.value, t && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = q, r.events = {
+    didChange: "didChange",
+    validationChange: "validationChange"
+  }, m(u, a), r);
+  return _ = u;
+})();
+export {
+  it as SbbTimeInputElement
+};

package/time-input.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './time-input/time-input.js';
 //# sourceMappingURL=time-input.d.ts.map

package/time-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../src/elements/time-input.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../src/elements/time-input.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4BAA4B,CAAC"}

package/time-input.js

@@ -1,174 +1,4 @@
-var T = (n) => {
-  throw TypeError(n);
-};
-var V = (n, s, a) => s.has(n) || T("Cannot " + a);
-var E = (n, s, a) => (V(n, s, "read from private field"), a ? a.call(n) : s.get(n)), g = (n, s, a) => s.has(n) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, u) => (V(n, s, "write to private field"), u ? u.call(n, a) : s.set(n, a), a);
-import { __runInitializers as m, __esDecorate as b } from "tslib";
-import { css as x, LitElement as H, isServer as R, html as M } from "lit";
-import { customElement as U, property as L, state as z } from "lit/decorators.js";
-import { ref as $ } from "lit/directives/ref.js";
-import { SbbIdReferenceController as P, SbbLanguageController as G } from "./core/controllers.js";
-import { EventEmitter as O, forwardEvent as k } from "./core/eventing.js";
-import { i18nTimeInputChange as j } from "./core/i18n.js";
-const q = x`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, K = /[0-9.:,\-;_hH]/, W = /^([0-9]{1,2})([0-9]{2})$/, X = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let it = (() => {
-  var p, h, r;
-  let n = [U("sbb-time-input")], s, a = [], u, f = H, C = [], v, A = [], w = [], y, I = [], D = [], S;
-  var _ = (r = class extends f {
-    constructor() {
-      super(...arguments);
-      g(this, p);
-      g(this, h);
-      c(this, p, (m(this, C), m(this, A, null))), c(this, h, (m(this, w), m(this, I, null))), this._didChange = (m(this, D), new O(this, _.events.didChange, {
-        bubbles: !0,
-        cancelable: !0
-      })), this._validationChange = new O(this, _.events.validationChange, {
-        bubbles: !0,
-        composed: !1
-      }), this._inputAbortController = new AbortController(), this._inputIdReferenceController = new P(this, "input"), this._language = new G(this);
-    }
-    // TODO: Replace HTMLElement by HTMLInputElement
-    /** Reference of the native input connected to the datepicker. */
-    get input() {
-      return E(this, p);
-    }
-    set input(t) {
-      c(this, p, t);
-    }
-    get _inputElement() {
-      return E(this, h);
-    }
-    set _inputElement(t) {
-      c(this, h, t);
-    }
-    /** Formats the current input's value as date. */
-    set valueAsDate(t) {
-      if (!t || !this._inputElement)
-        return;
-      const e = t instanceof Date ? t : new Date(t);
-      this._inputElement.value = this._formatValue({
-        hours: e.getHours(),
-        minutes: e.getMinutes()
-      }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
-    }
-    get valueAsDate() {
-      var t;
-      return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._configureInputElement();
-    }
-    disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this._inputAbortController) == null || t.abort(), this._inputElement = null;
-    }
-    requestUpdate(t, e, i) {
-      super.requestUpdate(t, e, i), !R && (!t || t === "input") && this.hasUpdated && this._configureInputElement();
-    }
-    _configureInputElement() {
-      var e, i, l, d;
-      const t = this.input instanceof HTMLInputElement ? this.input : this._inputIdReferenceController.find() ?? ((i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) == null ? void 0 : i.querySelector("input")) ?? null;
-      t !== this._inputElement && ((l = this._inputAbortController) == null || l.abort(), (d = this._inputElement) == null || d.removeAttribute("data-sbb-time-input"), this._inputElement = t, this._inputElement && (this._updateValue(this._inputElement.value), this._inputAbortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (o) => k(o, this), {
-        signal: this._inputAbortController.signal
-      }), this._inputElement.addEventListener("keydown", (o) => this._preventCharInsert(o), { signal: this._inputAbortController.signal }), this._inputElement.addEventListener("change", (o) => this._updateValue(o.target.value), {
-        signal: this._inputAbortController.signal,
-        capture: !0
-      }), this._inputElement.addEventListener("change", (o) => {
-        this._emitChange(o), this._updateAccessibilityMessage();
-      }, {
-        signal: this._inputAbortController.signal
-      })));
-    }
-    /**
-     * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
-     * to force the input change when the typed value is the same of the current one.
-     */
-    _updateValue(t) {
-      if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
-        return;
-      const e = this._parseInput(t), i = !!e && this._isTimeValid(e), l = !t || t.trim() === "" || i;
-      l && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
-      const d = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !l), d !== l && this._validationChange.emit({ valid: l });
-    }
-    /** Emits the change event. */
-    _emitChange(t) {
-      k(t, this), this._didChange.emit();
-    }
-    /** Returns the right format for the `value` property. */
-    _formatValue(t) {
-      const e = String(t.hours).padStart(2, "0"), i = String(t.minutes).padStart(2, "0");
-      return `${e}:${i}`;
-    }
-    /**
-     * Returns the right format for the `valueAsDate` property:
-     * sets the start date at 01.01.1970, then adds the typed hours/minutes.
-     */
-    _formatValueAsDate(t) {
-      return !t || !this._isTimeValid(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
-    }
-    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
-    _isTimeValid(t) {
-      return t.hours < 24 && t.minutes < 60;
-    }
-    /** Validate input against the defined RegExps. */
-    _parseInput(t) {
-      const e = t == null ? void 0 : t.trim();
-      if (!e)
-        return null;
-      const i = e.match(W);
-      if (i)
-        return { hours: +i[1] || 0, minutes: +i[2] || 0 };
-      const l = e.match(X);
-      return l ? { hours: +l[1] || 0, minutes: +l[2] || 0 } : null;
-    }
-    /**  Only allow typing numbers and separator keys. */
-    _preventCharInsert(t) {
-      const e = [
-        "Backspace",
-        "Tab",
-        "Enter",
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-        "Home",
-        "End",
-        "PageUp",
-        "PageDown",
-        "Delete"
-      ];
-      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !K.test(t.key) && t.preventDefault();
-    }
-    // We use a programmatic approach to avoid initial setting the message
-    // and to not immediately change output if language should change (no reason to read out message).
-    _updateAccessibilityMessage() {
-      var e;
-      this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${j[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
-    }
-    render() {
-      return M`
-      <p
-        role="status"
-        ${$((t) => this._statusContainer = t)}
-      ></p>
-    `;
-    }
-  }, p = new WeakMap(), h = new WeakMap(), u = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    v = [L()], y = [z()], S = [L({ attribute: !1 })], b(r, null, v, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, i) => {
-      e.input = i;
-    } }, metadata: t }, A, w), b(r, null, y, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
-      e._inputElement = i;
-    } }, metadata: t }, I, D), b(r, null, S, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
-      e.valueAsDate = i;
-    } }, metadata: t }, null, C), b(null, s = { value: u }, n, { kind: "class", name: u.name, metadata: t }, null, a), _ = u = s.value, t && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = q, r.events = {
-    didChange: "didChange",
-    validationChange: "validationChange"
-  }, m(u, a), r);
-  return _ = u;
-})();
+import { SbbTimeInputElement as t } from "./time-input/time-input.js";
 export {
-  it as SbbTimeInputElement
+  t as SbbTimeInputElement
 };

package/timetable-occupancy/timetable-occupancy.js

@@ -0,0 +1,75 @@
+var x = (s) => {
+  throw TypeError(s);
+};
+var z = (s, t, a) => t.has(s) || x("Cannot " + a);
+var u = (s, t, a) => (z(s, t, "read from private field"), a ? a.call(s) : t.get(s)), m = (s, t, a) => t.has(s) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, a), o = (s, t, a, i) => (z(s, t, "write to private field"), i ? i.call(s, a) : t.set(s, a), a);
+import { __runInitializers as b, __esDecorate as y } from "tslib";
+import { css as S, LitElement as $, nothing as k, html as h } from "lit";
+import { customElement as E, property as w } from "lit/decorators.js";
+import { SbbLanguageController as I } from "../core/controllers.js";
+import { i18nClass as D } from "../core/i18n.js";
+import { SbbNegativeMixin as j } from "../core/mixins.js";
+import "../screen-reader-only.js";
+import "../timetable-occupancy-icon.js";
+const L = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-timetable-occupancy-color: var(--sbb-color-charcoal);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem}@media (min-width: 52.5rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-white)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
+let J = (() => {
+  var l, r, n;
+  let s = [E("sbb-timetable-occupancy")], t, a = [], i, f = j($), d, _ = [], g = [], O, C = [], v = [];
+  return n = class extends f {
+    constructor() {
+      super(...arguments);
+      m(this, l);
+      m(this, r);
+      o(this, l, b(this, _, null)), o(this, r, (b(this, g), b(this, C, null))), this._language = (b(this, v), new I(this));
+    }
+    /** Occupancy for first class wagons. */
+    get firstClassOccupancy() {
+      return u(this, l);
+    }
+    set firstClassOccupancy(c) {
+      o(this, l, c);
+    }
+    /** Occupancy for second class wagons. */
+    get secondClassOccupancy() {
+      return u(this, r);
+    }
+    set secondClassOccupancy(c) {
+      o(this, r, c);
+    }
+    render() {
+      return h` ${(this.firstClassOccupancy || this.secondClassOccupancy) && h`
+      <ul
+        class="sbb-timetable-occupancy__list"
+        role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : k}
+      >
+        ${[this.firstClassOccupancy, this.secondClassOccupancy].map((c, e) => c && h`
+              <li class="sbb-timetable-occupancy__list-item">
+                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
+                  ${this.firstClassOccupancy && e === 0 ? "1" : "2"}.
+                </span>
+                <sbb-screen-reader-only>
+                  ${`${D[this.firstClassOccupancy && e === 0 ? "first" : "second"][this._language.current]}.`}
+                </sbb-screen-reader-only>
+                <sbb-timetable-occupancy-icon
+                  class="sbb-timetable-occupancy__list-item-icon"
+                  ?negative=${this.negative}
+                  .occupancy=${c}
+                >
+                </sbb-timetable-occupancy-icon>
+              </li>
+            `)}
+      </ul>
+    `}`;
+    }
+  }, l = new WeakMap(), r = new WeakMap(), i = n, (() => {
+    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    d = [w({ attribute: "first-class-occupancy" })], O = [w({ attribute: "second-class-occupancy" })], y(n, null, d, { kind: "accessor", name: "firstClassOccupancy", static: !1, private: !1, access: { has: (e) => "firstClassOccupancy" in e, get: (e) => e.firstClassOccupancy, set: (e, p) => {
+      e.firstClassOccupancy = p;
+    } }, metadata: c }, _, g), y(n, null, O, { kind: "accessor", name: "secondClassOccupancy", static: !1, private: !1, access: { has: (e) => "secondClassOccupancy" in e, get: (e) => e.secondClassOccupancy, set: (e, p) => {
+      e.secondClassOccupancy = p;
+    } }, metadata: c }, C, v), y(null, t = { value: i }, s, { kind: "class", name: i.name, metadata: c }, null, a), i = t.value, c && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
+  })(), n.styles = L, b(i, a), i;
+})();
+export {
+  J as SbbTimetableOccupancyElement
+};

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

@@ -0,0 +1,64 @@
+var b = (t) => {
+  throw TypeError(t);
+};
+var _ = (t, a, c) => a.has(t) || b("Cannot " + c);
+var d = (t, a, c) => (_(t, a, "read from private field"), c ? c.call(t) : a.get(t)), y = (t, a, c) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, c), l = (t, a, c, s) => (_(t, a, "write to private field"), s ? s.call(t, c) : a.set(t, c), c);
+import { __runInitializers as n, __esDecorate as f } from "tslib";
+import { customElement as A, property as C } from "lit/decorators.js";
+import { SbbLanguageController as I, SbbMediaMatcherController as L, SbbMediaQueryForcedColors as g } from "../core/controllers.js";
+import { setOrRemoveAttribute as w } from "../core/dom.js";
+import { i18nOccupancy as M } from "../core/i18n.js";
+import { SbbNegativeMixin as x } from "../core/mixins.js";
+import { SbbIconBase as v } from "../icon.js";
+import { css as z } from "lit";
+const N = z`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+let Q = (() => {
+  var o, r;
+  let t = [A("sbb-timetable-occupancy-icon")], a, c = [], s, u = x(v), m, h = [], p = [];
+  return r = class extends u {
+    constructor() {
+      super(...arguments);
+      y(this, o);
+      l(this, o, n(this, h, "none")), this._language = (n(this, p), new I(this).withHandler(() => this._setAriaLabel())), this._mediaMatcher = new L(this, {
+        [g]: (e) => {
+          this._forcedColors = e, this._setNameAndAriaLabel();
+        }
+      }), this._forcedColors = this._mediaMatcher.matches(g) ?? !1;
+    }
+    /** Wagon occupancy. */
+    get occupancy() {
+      return d(this, o);
+    }
+    set occupancy(e) {
+      l(this, o, e);
+    }
+    async _setNameAndAriaLabel() {
+      if (!this.occupancy)
+        return;
+      let e = `utilization-${this.occupancy}`;
+      this._forcedColors ? e += "-high-contrast" : this.negative && (e += "-negative"), await this.loadSvgIcon(e);
+    }
+    async fetchSvgIcon(e, i) {
+      return this._setAriaLabel(), super.fetchSvgIcon(e, i);
+    }
+    _setAriaLabel() {
+      var i;
+      const e = (i = M[this.occupancy]) == null ? void 0 : i[this._language.current];
+      w(this, "aria-label", e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._setNameAndAriaLabel();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
+    }
+  }, o = new WeakMap(), s = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    m = [C()], f(r, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (i) => "occupancy" in i, get: (i) => i.occupancy, set: (i, S) => {
+      i.occupancy = S;
+    } }, metadata: e }, h, p), f(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, c), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [v.styles, N], n(s, c), s;
+})();
+export {
+  Q as SbbTimetableOccupancyIconElement
+};

package/timetable-occupancy-icon.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './timetable-occupancy-icon/timetable-occupancy-icon.js';
 //# sourceMappingURL=timetable-occupancy-icon.d.ts.map

package/timetable-occupancy-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../src/elements/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,cAAc,wDAAwD,CAAC"}
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../src/elements/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wDAAwD,CAAC"}