@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/tag/tag-group.js

@@ -1,23 +1,23 @@
-import { css as h, LitElement as f, isServer as b, html as u } from "lit";
+import { css as h, LitElement as u, isServer as b, html as f } from "lit";
 import { property as o, customElement as n } from "lit/decorators.js";
 import { setOrRemoveAttribute as m } from "../core/dom.js";
 import { SbbNamedSlotListMixin as y } from "../core/mixins.js";
 const g = h`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}`;
-var d = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var l = i > 1 ? void 0 : i ? A(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
+  for (var l = i > 1 ? void 0 : i ? v(t, s) : t, c = e.length - 1, p; c >= 0; c--)
     (p = e[c]) && (l = (i ? p(t, s, l) : p(l)) || l);
   return i && l && d(t, s, l), l;
 };
 let r = class extends y(
-  f
+  u
 ) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-tag", "div"], this.multiple = !1, this.size = "m", this.a = null;
+    super(...arguments), this.listChildLocalNames = ["sbb-tag", "div"], this.multiple = !1, this.size = "m", this._value = null;
   }
   set value(e) {
     const t = this.tags;
     if (b)
-      this.a = e;
+      this._value = e;
     else if (e === null)
       t.forEach((s) => s.checked = !1);
     else if (this.multiple) {
@@ -33,7 +33,7 @@ let r = class extends y(
   }
   get value() {
     var e;
-    return b ? this.a : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : ((e = this.tags.find((t) => t.checked)) == null ? void 0 : e.value) ?? null;
+    return b ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : ((e = this.tags.find((t) => t.checked)) == null ? void 0 : e.value) ?? null;
   }
   /** The child instances of sbb-tag as an array. */
   get tags() {
@@ -51,7 +51,7 @@ let r = class extends y(
     );
   }
   render() {
-    return u`
+    return f`
       <div class="sbb-tag-group">
         ${this.renderList({
       class: "sbb-tag-group__list",

package/tag/tag.js

@@ -3,49 +3,49 @@ import { property as c, customElement as h } from "lit/decorators.js";
 import { SbbButtonBaseElement as v } from "../core/base-elements.js";
 import { SbbConnectedAbortController as u, SbbSlotStateController as m } from "../core/controllers.js";
 import { EventEmitter as l } from "../core/eventing.js";
-import { SbbDisabledTabIndexActionMixin as f } from "../core/mixins.js";
-import { SbbIconNameMixin as p } from "../icon.js";
+import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
+import { SbbIconNameMixin as f } from "../icon.js";
 const x = d`*,:before,:after{box-sizing:border-box}:host{--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x);display:inline-block;outline:none!important;max-width:100%}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (t, o, b, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(o, b) : o, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (s = (a ? n(o, b, s) : n(s)) || s);
-  return a && s && y(o, b, s), s;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, e, b, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(e, b) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (a ? n(e, b, s) : n(s)) || s);
+  return a && s && y(e, b, s), s;
 };
-let e = class extends p(
-  f(v)
+let o = class extends f(
+  p(v)
 ) {
   constructor() {
-    super(), this.checked = !1, this.a = "m", this.b = null, this.c = new l(this, e.events.input, {
+    super(), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, o.events.input, {
       bubbles: !0,
       composed: !0
-    }), this.d = new l(this, e.events.didChange, {
+    }), this._didChange = new l(this, o.events.didChange, {
       bubbles: !0
-    }), this.e = new l(this, e.events.change, {
+    }), this._change = new l(this, o.events.change, {
       bubbles: !0
-    }), this.f = new u(this), new m(this);
+    }), this._abort = new u(this), new m(this);
   }
   set size(t) {
-    this.a = t;
+    this._size = t;
   }
   get size() {
     var t;
-    return ((t = this.b) == null ? void 0 : t.size) ?? this.a;
+    return ((t = this._group) == null ? void 0 : t.size) ?? this._size;
   }
   connectedCallback() {
-    super.connectedCallback(), this.b = this.closest("sbb-tag-group"), this.addEventListener("click", () => this.g(), { signal: this.f.signal });
+    super.connectedCallback(), this._group = this.closest("sbb-tag-group"), this.addEventListener("click", () => this._handleClick(), { signal: this._abort.signal });
   }
   /** Method triggered on button click. Inverts the checked value and emits events. */
-  g() {
+  _handleClick() {
     if (this.disabled)
       return;
     const t = this.closest("sbb-tag-group");
-    t && !t.multiple && this.checked || (this.checked = !this.checked, this.c.emit(), this.e.emit(), this.d.emit());
+    t && !t.multiple && this.checked || (this.checked = !this.checked, this._input.emit(), this._change.emit(), this._didChange.emit());
   }
   willUpdate(t) {
     var b;
     super.willUpdate(t), t.has("checked") && this.setAttribute("aria-pressed", `${this.checked}`);
-    const o = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
-    o && !o.multiple && t.has("checked") && this.checked && (o == null || o.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
+    const e = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
+    e && !e.multiple && t.has("checked") && this.checked && (e == null || e.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
   }
   renderTemplate() {
     return g`
@@ -59,24 +59,24 @@ let e = class extends p(
     `;
   }
 };
-e.styles = x;
-e.events = {
+o.styles = x;
+o.events = {
   input: "input",
   didChange: "didChange",
   change: "change"
 };
 r([
   c({ reflect: !0 })
-], e.prototype, "amount", 2);
+], o.prototype, "amount", 2);
 r([
   c({ reflect: !0, type: Boolean })
-], e.prototype, "checked", 2);
+], o.prototype, "checked", 2);
 r([
   c({ reflect: !0 })
-], e.prototype, "size", 1);
-e = r([
+], o.prototype, "size", 1);
+o = r([
   h("sbb-tag")
-], e);
+], o);
 export {
-  e as SbbTagElement
+  o as SbbTagElement
 };

package/teaser-paid.js

@@ -1,28 +1,28 @@
-import { css as n, html as l } from "lit";
+import { css as b, html as l } from "lit";
 import { customElement as p } from "lit/decorators.js";
 import { SbbLinkBaseElement as c } from "./core/base-elements.js";
-const d = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-teaser-paid-brightness-hover: 1.075;--sbb-teaser-paid-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-paid-animation-easing: var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover){--sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover)}}.sbb-teaser-paid{position:relative;display:block}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-paid:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-paid-chip-inset);z-index:1}::slotted([slot=image]){will-change:filter;filter:brightness(var(--sbb-teaser-paid-brightness, 1));transition:filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing)}`;
-var v = Object.defineProperty, h = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
-  for (var e = i > 1 ? void 0 : i ? h(t, a) : t, o = s.length - 1, r; o >= 0; o--)
+const d = b`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-teaser-paid-brightness-hover: 1.075;--sbb-teaser-paid-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-paid-animation-easing: var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover){--sbb-teaser-paid-brightness: var(--sbb-teaser-paid-brightness-hover)}}.sbb-teaser-paid{position:relative;display:block}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-paid:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-paid-chip-inset);z-index:1}::slotted([slot=image]){will-change:filter;filter:brightness(var(--sbb-teaser-paid-brightness, 1));transition:filter var(--sbb-teaser-paid-animation-duration) var(--sbb-teaser-paid-animation-easing)}`;
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, m = (s, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(t, a) : t, o = s.length - 1, r; o >= 0; o--)
     (r = s[o]) && (e = (i ? r(t, a, e) : r(e)) || e);
-  return i && e && v(t, a, e), e;
+  return i && e && h(t, a, e), e;
 };
-let b = class extends c {
-  a() {
+let n = class extends c {
+  _chipSlotChanged() {
     var s;
     (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
   }
   renderTemplate() {
     return l`
-      <slot name="chip" @slotchange=${() => this.a()}></slot>
+      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
       <slot name="image"></slot>
     `;
   }
 };
-b.styles = d;
-b = m([
+n.styles = d;
+n = m([
   p("sbb-teaser-paid")
-], b);
+], n);
 export {
-  b as SbbTeaserPaidElement
+  n as SbbTeaserPaidElement
 };

package/time-input.js

@@ -1,131 +1,131 @@
-import { css as c, LitElement as p, html as d } from "lit";
-import { property as m, state as b, customElement as f } from "lit/decorators.js";
+import { css as p, LitElement as m, html as _ } from "lit";
+import { property as d, state as c, customElement as E } from "lit/decorators.js";
 import { ref as g } from "lit/directives/ref.js";
-import { SbbLanguageController as w } from "./core/controllers.js";
-import { findInput as E } from "./core/dom.js";
-import { EventEmitter as l, forwardEventToHost as u } from "./core/eventing.js";
-import { i18nTimeInputChange as v } from "./core/i18n.js";
-const C = c`: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}`;
-var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, h; a >= 0; a--)
-    (h = t[a]) && (n = (i ? h(e, s, n) : h(n)) || n);
-  return i && n && A(e, s, n), n;
+import { SbbLanguageController as b } from "./core/controllers.js";
+import { findInput as f } from "./core/dom.js";
+import { EventEmitter as o, forwardEventToHost as h } from "./core/eventing.js";
+import { i18nTimeInputChange as C } from "./core/i18n.js";
+const w = p`: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}`;
+var v = Object.defineProperty, A = Object.getOwnPropertyDescriptor, u = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? A(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (n ? l(e, i, s) : l(s)) || s);
+  return n && s && v(e, i, s), s;
 };
-const y = /[0-9.:,\-;_hH]/, O = /^([0-9]{1,2})([0-9]{2})$/, D = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let r = class extends p {
+const V = /[0-9.:,\-;_hH]/, y = /^([0-9]{1,2})([0-9]{2})$/, I = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let r = class extends m {
   constructor() {
-    super(...arguments), this.d = null, this.a = null, this.j = new l(this, r.events.didChange, {
+    super(...arguments), this._input = null, this._inputElement = null, this._didChange = new o(this, r.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this.k = new l(
+    }), this._validationChange = new o(
       this,
       r.events.validationChange,
       {
         bubbles: !0,
         composed: !1
       }
-    ), this.b = new AbortController(), this.l = new w(this);
+    ), this._abortController = new AbortController(), this._language = new b(this);
   }
   set input(t) {
-    this.d = t, this.e();
+    this._input = t, this._findInputElement();
   }
   get input() {
-    return this.d;
+    return this._input;
   }
   connectedCallback() {
-    super.connectedCallback(), this.e(), this.a && this.f(this.a.value);
+    super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
   }
   disconnectedCallback() {
     var t;
-    super.disconnectedCallback(), (t = this.b) == null || t.abort();
+    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
   }
   /** Gets the input value with the correct date format. */
   // TODO: refactor this to be a get/set
   getValueAsDate() {
     var t;
-    return this.m(this.g((t = this.a) == null ? void 0 : t.value));
+    return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value));
   }
   /** Set the input value to the correctly formatted value. */
   setValueAsDate(t) {
-    if (!t || !this.a)
+    if (!t || !this._inputElement)
       return;
     const e = t instanceof Date ? t : new Date(t);
-    this.a.value = this.h({
+    this._inputElement.value = this._formatValue({
       hours: e.getHours(),
       minutes: e.getMinutes()
-    }), this.a.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
+    }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
   }
-  e() {
-    const t = this.a;
-    this.a = E(this, this.input), t !== this.a && this.n();
+  _findInputElement() {
+    const t = this._inputElement;
+    this._inputElement = f(this, this.input), t !== this._inputElement && this._registerInputElement();
   }
-  n() {
+  _registerInputElement() {
     var t;
-    (t = this.b) == null || t.abort(), this.a && (this.b = new AbortController(), this.a.toggleAttribute("data-sbb-time-input", !0), this.a.type = "text", this.a.inputMode = "numeric", this.a.maxLength = 5, this.a.placeholder || (this.a.placeholder = "HH:MM"), this.a.addEventListener(
+    (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = 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",
-      (e) => u(e, this),
-      { signal: this.b.signal }
-    ), this.a.addEventListener(
+      (e) => h(e, this),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
       "keydown",
-      (e) => this.o(e),
-      { signal: this.b.signal }
-    ), this.a.addEventListener(
+      (e) => this._preventCharInsert(e),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
       "change",
-      (e) => this.p(e),
+      (e) => this._updateValueAndEmitChange(e),
       {
-        signal: this.b.signal
+        signal: this._abortController.signal
       }
     ));
   }
   /** Applies the correct format to values and triggers event dispatch. */
-  p(t) {
-    this.f(t.target.value), this.q(t), this.r();
+  _updateValueAndEmitChange(t) {
+    this._updateValue(t.target.value), this._emitChange(t), this._updateAccessibilityMessage();
   }
   /**
    * 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.
    */
-  f(t) {
-    if (this.c && (this.c.innerText = ""), !this.a)
+  _updateValue(t) {
+    if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
       return;
-    const e = this.g(t), s = !!e && this.i(e), i = !t || t.trim() === "" || s;
-    i && e && (this.a.value = this.h(e));
-    const n = !this.a.hasAttribute("data-sbb-invalid");
-    this.a.toggleAttribute("data-sbb-invalid", !i), n !== i && this.k.emit({ valid: i });
+    const e = this._parseInput(t), i = !!e && this._isTimeValid(e), n = !t || t.trim() === "" || i;
+    n && e && (this._inputElement.value = this._formatValue(e));
+    const s = !this._inputElement.hasAttribute("data-sbb-invalid");
+    this._inputElement.toggleAttribute("data-sbb-invalid", !n), s !== n && this._validationChange.emit({ valid: n });
   }
   /** Emits the change event. */
-  q(t) {
-    u(t, this), this.j.emit();
+  _emitChange(t) {
+    h(t, this), this._didChange.emit();
   }
   /** Returns the right format for the `value` property. */
-  h(t) {
-    const e = String(t.hours).padStart(2, "0"), s = String(t.minutes).padStart(2, "0");
-    return `${e}:${s}`;
+  _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.
    */
-  m(t) {
-    return !t || !this.i(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
+  _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. */
-  i(t) {
+  _isTimeValid(t) {
     return t.hours < 24 && t.minutes < 60;
   }
   /** Validate input against the defined RegExps. */
-  g(t) {
+  _parseInput(t) {
     const e = t == null ? void 0 : t.trim();
     if (!e)
       return null;
-    const s = e.match(O);
-    if (s)
-      return { hours: +s[1] || 0, minutes: +s[2] || 0 };
-    const i = e.match(D);
-    return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
+    const i = e.match(y);
+    if (i)
+      return { hours: +i[1] || 0, minutes: +i[2] || 0 };
+    const n = e.match(I);
+    return n ? { hours: +n[1] || 0, minutes: +n[2] || 0 } : null;
   }
   /**  Only allow typing numbers and separator keys. */
-  o(t) {
+  _preventCharInsert(t) {
     const e = [
       "Backspace",
       "Tab",
@@ -140,36 +140,36 @@ let r = class extends p {
       "PageDown",
       "Delete"
     ];
-    !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !y.test(t.key) && t.preventDefault();
+    !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !V.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).
-  r() {
+  _updateAccessibilityMessage() {
     var e;
-    this.a.hasAttribute("data-sbb-invalid") || (this.c.innerText = `${v[this.l.current]} ${(e = this.a) == null ? void 0 : e.value}.`);
+    this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${C[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
   }
   render() {
-    return d`
+    return _`
       <p
         role="status"
-        ${g((t) => this.c = t)}
+        ${g((t) => this._statusContainer = t)}
       ></p>
     `;
   }
 };
-r.styles = C;
+r.styles = w;
 r.events = {
   didChange: "didChange",
   validationChange: "validationChange"
 };
-o([
-  m()
+u([
+  d()
 ], r.prototype, "input", 1);
-o([
-  b()
-], r.prototype, "a", 2);
-r = o([
-  f("sbb-time-input")
+u([
+  c()
+], r.prototype, "_inputElement", 2);
+r = u([
+  E("sbb-time-input")
 ], r);
 export {
   r as SbbTimeInputElement

package/timetable-occupancy-icon.js

@@ -1,21 +1,21 @@
-import { property as h, customElement as p } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbLanguageController as b } from "./core/controllers.js";
+import { property as h, customElement as m } from "lit/decorators.js";
+import { SbbConnectedAbortController as b, SbbLanguageController as p } from "./core/controllers.js";
 import { setOrRemoveAttribute as d } from "./core/dom.js";
 import { i18nOccupancy as f } from "./core/i18n.js";
 import { SbbNegativeMixin as u } from "./core/mixins.js";
 import { SbbIconBase as n } from "./icon.js";
-import { css as v } from "lit";
-const g = v`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, i, a) => {
-  for (var c = a > 1 ? void 0 : a ? y(t, i) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (c = (a ? r(t, i, c) : r(c)) || c);
-  return a && c && w(t, i, c), c;
+import { css as g } from "lit";
+const v = g`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? w(t, i) : t, c = e.length - 1, o; c >= 0; c--)
+    (o = e[c]) && (a = (r ? o(t, i, a) : o(a)) || a);
+  return r && a && _(t, i, a), a;
 };
-let o = class extends u(n) {
+let s = class extends u(n) {
   constructor() {
-    super(...arguments), this.b = new m(this), this.d = new b(this).withHandler(() => this.c());
+    super(...arguments), this._abort = new b(this), this._language = new p(this).withHandler(() => this._setAriaLabel());
   }
-  async a() {
+  async _setNameAndAriaLabel() {
     var t, i;
     if (!this.occupancy)
       return;
@@ -23,31 +23,31 @@ let o = class extends u(n) {
     (t = globalThis.window) != null && t.matchMedia("(forced-colors: active)").matches ? e += "-high-contrast" : (this.negative || (i = globalThis.window) != null && i.matchMedia("(prefer-color-scheme: dark)").matches) && (e += "-negative"), await this.loadSvgIcon(e);
   }
   async fetchSvgIcon(e, t) {
-    return this.c(), super.fetchSvgIcon(e, t);
+    return this._setAriaLabel(), super.fetchSvgIcon(e, t);
   }
-  c() {
+  _setAriaLabel() {
     var t;
-    const e = (t = f[this.occupancy]) == null ? void 0 : t[this.d.current];
+    const e = (t = f[this.occupancy]) == null ? void 0 : t[this._language.current];
     d(this, "aria-label", e);
   }
   connectedCallback() {
-    super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this.a(), {
-      signal: this.b.signal
-    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this.a(), {
-      signal: this.b.signal
-    }), this.a();
+    super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), this._setNameAndAriaLabel();
   }
   willUpdate(e) {
-    super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this.a();
+    super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
   }
 };
-o.styles = [n.styles, g];
+s.styles = [n.styles, v];
 l([
   h()
-], o.prototype, "occupancy", 2);
-o = l([
-  p("sbb-timetable-occupancy-icon")
-], o);
+], s.prototype, "occupancy", 2);
+s = l([
+  m("sbb-timetable-occupancy-icon")
+], s);
 export {
-  o as SbbTimetableOccupancyIconElement
+  s as SbbTimetableOccupancyIconElement
 };

package/timetable-occupancy.js

@@ -1,19 +1,19 @@
 import { css as p, LitElement as m, html as r, nothing as y } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
+import { property as b, customElement as u } from "lit/decorators.js";
 import { SbbLanguageController as f } from "./core/controllers.js";
 import { i18nClass as h } from "./core/i18n.js";
 import { SbbNegativeMixin as g } from "./core/mixins.js";
 import "./screen-reader-only.js";
 import "./timetable-occupancy-icon.js";
 const v = p`*,:before,:after{box-sizing:border-box}:host{--sbb-timetable-occupancy-color: var(--sbb-color-charcoal);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;display:inline-block}@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}`;
-var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, b = (e, t, a, i) => {
+var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, a, i) => {
   for (var s = i > 1 ? void 0 : i ? _(t, a) : t, n = e.length - 1, o; n >= 0; n--)
     (o = e[n]) && (s = (i ? o(t, a, s) : o(s)) || s);
   return i && s && d(t, a, s), s;
 };
 let c = class extends g(m) {
   constructor() {
-    super(...arguments), this.a = new f(this);
+    super(...arguments), this._language = new f(this);
   }
   render() {
     return r` ${(this.firstClassOccupancy || this.secondClassOccupancy) && r`
@@ -28,7 +28,7 @@ let c = class extends g(m) {
                   ${this.firstClassOccupancy && t === 0 ? "1" : "2"}.
                 </span>
                 <sbb-screen-reader-only>
-                  ${`${h[this.firstClassOccupancy && t === 0 ? "first" : "second"][this.a.current]}.`}
+                  ${`${h[this.firstClassOccupancy && t === 0 ? "first" : "second"][this._language.current]}.`}
                 </sbb-screen-reader-only>
                 <sbb-timetable-occupancy-icon
                   class="sbb-timetable-occupancy__list-item-icon"
@@ -44,13 +44,13 @@ let c = class extends g(m) {
   }
 };
 c.styles = v;
-b([
-  l({ attribute: "first-class-occupancy" })
+l([
+  b({ attribute: "first-class-occupancy" })
 ], c.prototype, "firstClassOccupancy", 2);
-b([
-  l({ attribute: "second-class-occupancy" })
+l([
+  b({ attribute: "second-class-occupancy" })
 ], c.prototype, "secondClassOccupancy", 2);
-c = b([
+c = l([
   u("sbb-timetable-occupancy")
 ], c);
 export {