@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/core/a11y.js

@@ -1,82 +1,82 @@
-import { getDocumentWritingMode as w } from "./dom.js";
-import { isServer as A } from "lit";
-import { getEventTarget as u } from "./eventing.js";
-function l() {
-  return w() === "rtl" ? { prevKey: "ArrowRight", nextKey: "ArrowLeft" } : { prevKey: "ArrowLeft", nextKey: "ArrowRight" };
+import { getDocumentWritingMode as _ } from "./dom.js";
+import { isServer as w } from "lit";
+import { getEventTarget as a } from "./eventing.js";
+function d() {
+  return _() === "rtl" ? { prevKey: "ArrowRight", nextKey: "ArrowLeft" } : { prevKey: "ArrowLeft", nextKey: "ArrowRight" };
 }
-function E(t) {
+function R(t) {
   return ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(t.key);
 }
+function V(t) {
+  return t.key === "ArrowUp" || t.key === d().prevKey;
+}
 function W(t) {
-  return t.key === "ArrowUp" || t.key === l().prevKey;
+  return t.key === "ArrowDown" || t.key === d().nextKey;
 }
 function Y(t) {
-  return t.key === "ArrowDown" || t.key === l().nextKey;
-}
-function _(t) {
-  return E(t) || ["PageUp", "PageDown", "Home", "End"].includes(t.key);
+  return R(t) || ["PageUp", "PageDown", "Home", "End"].includes(t.key);
 }
-function f(t, e, n) {
-  return (t + n + e) % e;
+function f(t, e, o) {
+  return (t + o + e) % e;
 }
-function k(t) {
+function A(t) {
   return t - 1;
 }
 const y = 0;
-function B(t, e, n) {
-  const { prevKey: i, nextKey: r } = l();
-  return t.key === i || t.key === "ArrowUp" ? e < y ? k(n) : f(e, n, -1) : t.key === r || t.key === "ArrowDown" ? e >= n ? y : f(e, n, 1) : e;
+function B(t, e, o) {
+  const { prevKey: s, nextKey: r } = d();
+  return t.key === s || t.key === "ArrowUp" ? e < y ? A(o) : f(e, o, -1) : t.key === r || t.key === "ArrowDown" ? e >= o ? y : f(e, o, 1) : e;
 }
-function v(t) {
+function E(t) {
   return t.buttons === 0 || t.detail === 0;
 }
-function R(t) {
+function M(t) {
   const e = t.touches && t.touches[0] || t.changedTouches && t.changedTouches[0];
   return !!e && e.identifier === -1 && (e.radiusX == null || e.radiusX === 1) && (e.radiusY == null || e.radiusY === 1);
 }
-const L = 16, C = 17, K = 18, x = 91, F = 224, M = {
-  ignoreKeys: [K, C, F, x, L]
-}, S = 650, d = {
+const k = 16, v = 17, T = 18, K = 91, L = 224, C = {
+  ignoreKeys: [T, v, L, K, k]
+}, x = 650, l = {
   passive: !0,
   capture: !0
 };
-class D {
+class F {
   constructor() {
-    this.a = "mouse", this.b = null, this.d = {
-      ...M
-    }, this.c = 0, this.e = (e) => {
-      var n, i;
-      (i = (n = this.d) == null ? void 0 : n.ignoreKeys) != null && i.some((r) => r === e.keyCode) || (this.a = "keyboard", this.b = u(e));
-    }, this.f = (e) => {
-      Date.now() - this.c < S || (this.a = v(e) ? "keyboard" : "mouse", this.b = u(e));
-    }, this.g = (e) => {
-      if (R(e)) {
-        this.a = "keyboard", this.b = u(e);
+    this._mostRecentModality = "mouse", this._mostRecentTarget = null, this._options = {
+      ...C
+    }, this._lastTouchMs = 0, this._onKeydown = (e) => {
+      var o, s;
+      (s = (o = this._options) == null ? void 0 : o.ignoreKeys) != null && s.some((r) => r === e.keyCode) || (this._mostRecentModality = "keyboard", this._mostRecentTarget = a(e));
+    }, this._onMousedown = (e) => {
+      Date.now() - this._lastTouchMs < x || (this._mostRecentModality = E(e) ? "keyboard" : "mouse", this._mostRecentTarget = a(e));
+    }, this._onTouchstart = (e) => {
+      if (M(e)) {
+        this._mostRecentModality = "keyboard", this._mostRecentTarget = a(e);
         return;
       }
-      this.c = Date.now(), this.a = "touch", this.b = u(e);
-    }, A || (document.addEventListener("keydown", this.e, d), document.addEventListener("mousedown", this.f, d), document.addEventListener("touchstart", this.g, d));
+      this._lastTouchMs = Date.now(), this._mostRecentModality = "touch", this._mostRecentTarget = a(e);
+    }, w || (document.addEventListener("keydown", this._onKeydown, l), document.addEventListener("mousedown", this._onMousedown, l), document.addEventListener("touchstart", this._onTouchstart, l));
   }
   /** The most recently detected input modality. */
   get mostRecentModality() {
-    return this.a;
+    return this._mostRecentModality;
   }
   reset() {
-    this.a = "mouse", this.b = null, this.c = 0;
+    this._mostRecentModality = "mouse", this._mostRecentTarget = null, this._lastTouchMs = 0;
   }
   /**
    * The most recently detected input modality event target. Is null if no input modality has been
    * detected or if the associated event target is null for some unknown reason.
    */
   get mostRecentTarget() {
-    return this.b;
+    return this._mostRecentTarget;
   }
 }
-const b = new D();
+const m = new F();
 function X(t) {
   if (!t)
     return;
-  const e = b.mostRecentModality;
+  const e = m.mostRecentModality;
   t && e !== null && t.addEventListener(
     "focus",
     () => {
@@ -93,26 +93,26 @@ function X(t) {
 }
 class j {
   constructor(e) {
-    this.a = e, this.b = () => {
-      this.a.toggleAttribute(
+    this._host = e, this._focusinHandler = () => {
+      this._host.toggleAttribute(
         "data-has-visible-focus-within",
-        b.mostRecentModality === "keyboard"
+        m.mostRecentModality === "keyboard"
       );
-    }, this.c = () => {
-      this.a.removeAttribute("data-has-visible-focus-within");
-    }, this.a.addController(this);
+    }, this._focusoutHandler = () => {
+      this._host.removeAttribute("data-has-visible-focus-within");
+    }, this._host.addController(this);
   }
   hostConnected() {
-    this.a.addEventListener("focusin", this.b), this.a.addEventListener("focusout", this.c);
+    this._host.addEventListener("focusin", this._focusinHandler), this._host.addEventListener("focusout", this._focusoutHandler);
   }
   hostDisconnected() {
-    this.a.removeEventListener("focusin", this.b), this.a.removeEventListener("focusout", this.c);
+    this._host.removeEventListener("focusin", this._focusinHandler), this._host.removeEventListener("focusout", this._focusoutHandler);
   }
 }
-function I(t) {
+function S(t) {
   return !!(t.offsetWidth || t.offsetHeight || typeof t.getClientRects == "function" && t.getClientRects().length);
 }
-class N {
+class D {
   /**
    * Gets whether an element is visible for the purposes of interactivity.
    *
@@ -122,15 +122,15 @@ class N {
    * @returns Whether the element is visible.
    */
   isVisible(e) {
-    return I(e) && getComputedStyle(e).visibility === "visible";
+    return S(e) && getComputedStyle(e).visibility === "visible";
   }
 }
-class P {
+class I {
   isVisible() {
     return !0;
   }
 }
-const O = typeof getComputedStyle > "u" || getComputedStyle(document.documentElement).visibility === "" ? new P() : new N(), T = [
+const H = typeof getComputedStyle > "u" || getComputedStyle(document.documentElement).visibility === "" ? new I() : new D(), N = [
   "button",
   "[href]",
   "input",
@@ -141,38 +141,38 @@ const O = typeof getComputedStyle > "u" || getComputedStyle(document.documentEle
   "[tabindex]"
 ].map((t) => `${t}:not([disabled],[tabindex="-1"])`).join(",");
 function g(t, e) {
-  const n = /* @__PURE__ */ new Set();
-  function i(r, c) {
-    var o;
-    for (const s of r)
-      if (!(c && !c(s))) {
-        if (s.nodeName === "SLOT") {
-          i(
-            Array.from(s.assignedElements()),
+  const o = /* @__PURE__ */ new Set();
+  function s(r, c) {
+    var i;
+    for (const n of r)
+      if (!(c && !c(n))) {
+        if (n.nodeName === "SLOT") {
+          s(
+            Array.from(n.assignedElements()),
             c
           );
           continue;
         }
-        if (s.matches(T) && ((e == null ? void 0 : e.includeInvisibleElements) ?? O.isVisible(s)) && n.add(s), e != null && e.findFirstFocusable && n.size > 0)
+        if (n.matches(N) && ((e == null ? void 0 : e.includeInvisibleElements) ?? H.isVisible(n)) && o.add(n), e != null && e.findFirstFocusable && o.size > 0)
           break;
-        if (s.children.length || (o = s.shadowRoot) != null && o.children.length) {
-          const a = Array.from(s.children).length ? Array.from(s.children) : Array.from(s.shadowRoot.children);
-          i(a, c);
+        if (n.children.length || (i = n.shadowRoot) != null && i.children.length) {
+          const u = Array.from(n.children).length ? Array.from(n.children) : Array.from(n.shadowRoot.children);
+          s(u, c);
         }
       }
   }
-  return i(t, e == null ? void 0 : e.filter), [...n];
+  return s(t, e == null ? void 0 : e.filter), [...o];
 }
 function G(t, e) {
-  const n = g(t, {
+  const o = g(t, {
     filter: e,
     findFirstFocusable: !0
   });
-  return n.length ? n[0] : null;
+  return o.length ? o[0] : null;
 }
 class Q {
   constructor() {
-    this.a = new AbortController();
+    this._controller = new AbortController();
   }
   /**
    * @param element in which the focus should be trapped.
@@ -180,47 +180,47 @@ class Q {
    * @param options.filter filter function which is applied during searching for focusable element. If an element is filtered, also child elements are filtered.
    * @param options.postFilter filter function which is applied after collecting focusable elements.
    */
-  trap(e, n) {
+  trap(e, o) {
     e.addEventListener(
       "keydown",
-      (i) => {
-        if (i.key !== "Tab")
+      (s) => {
+        if (s.key !== "Tab")
           return;
         const r = Array.from(
           e.shadowRoot.children || []
-        ), o = g(r, {
-          filter: n == null ? void 0 : n.filter
+        ), i = g(r, {
+          filter: o == null ? void 0 : o.filter
         }).filter(
-          (n == null ? void 0 : n.postFilter) ?? (() => !0)
+          (o == null ? void 0 : o.postFilter) ?? (() => !0)
         );
-        if (!o.length)
+        if (!i.length)
           return;
-        const s = o[0], a = o[o.length - 1], [h, m] = i.shiftKey ? [s, a] : [a, s];
-        (s.getRootNode().activeElement === h || a.getRootNode().activeElement === h) && (m.focus(), i.preventDefault());
+        const n = i[0], u = i[i.length - 1], [h, b] = s.shiftKey ? [n, u] : [u, n];
+        (n.getRootNode().activeElement === h || u.getRootNode().activeElement === h) && (b.focus(), s.preventDefault());
       },
-      { signal: this.a.signal }
+      { signal: this._controller.signal }
     );
   }
   disconnect() {
-    this.a.abort(), this.a = new AbortController();
+    this._controller.abort(), this._controller = new AbortController();
   }
 }
 export {
-  T as IS_FOCUSABLE_QUERY,
-  N as InteractivityChecker,
+  N as IS_FOCUSABLE_QUERY,
+  D as InteractivityChecker,
   Q as SbbFocusHandler,
   j as SbbFocusVisibleWithinController,
   G as getFirstFocusableElement,
   g as getFocusableElements,
   B as getNextElementIndex,
-  I as hasGeometry,
-  O as interactivityChecker,
-  _ as isArrowKeyOrPageKeysPressed,
-  E as isArrowKeyPressed,
-  v as isFakeMousedownFromScreenReader,
-  R as isFakeTouchstartFromScreenReader,
-  Y as isNextArrowKeyPressed,
-  W as isPreviousArrowKeyPressed,
-  b as sbbInputModalityDetector,
+  S as hasGeometry,
+  H as interactivityChecker,
+  Y as isArrowKeyOrPageKeysPressed,
+  R as isArrowKeyPressed,
+  E as isFakeMousedownFromScreenReader,
+  M as isFakeTouchstartFromScreenReader,
+  W as isNextArrowKeyPressed,
+  V as isPreviousArrowKeyPressed,
+  m as sbbInputModalityDetector,
   X as setModalityOnNextFocus
 };

package/core/base-elements.js

@@ -1,15 +1,15 @@
-import { LitElement as w, html as f, isServer as g, nothing as l } from "lit";
-import { hostAttributes as y } from "./decorators.js";
-import { getDocumentWritingMode as O, getLocalName as $ } from "./dom.js";
-import { property as o } from "lit/decorators.js";
-import { isEventPrevented as E, EventEmitter as b } from "./eventing.js";
-import { SbbLanguageController as C } from "./controllers.js";
-import { i18nTargetOpensInNewWindow as D } from "./i18n.js";
+import { LitElement as w, html as v, isServer as g, nothing as o } from "lit";
+import { hostAttributes as f } from "./decorators.js";
+import { getDocumentWritingMode as O, getLocalName as _ } from "./dom.js";
+import { property as l } from "lit/decorators.js";
+import { isEventPrevented as C, EventEmitter as b } from "./eventing.js";
+import { SbbLanguageController as E } from "./controllers.js";
+import { i18nTargetOpensInNewWindow as $ } from "./i18n.js";
 import "../screen-reader-only.js";
-var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, L = (e, t, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? _(t, r) : t, a = e.length - 1, n; a >= 0; a--)
+var D = Object.defineProperty, k = Object.getOwnPropertyDescriptor, A = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(t, r) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (s = (i ? n(t, r, s) : n(s)) || s);
-  return i && s && P(t, r, s), s;
+  return i && s && D(t, r, s), s;
 };
 let m = class extends w {
   get maybeDisabled() {
@@ -33,40 +33,40 @@ let m = class extends w {
   }
   /** Default render method for button-like components. */
   render() {
-    return f`
-      <span class="sbb-action-base ${this.localName ?? $(this)}">
+    return v`
+      <span class="sbb-action-base ${this.localName ?? _(this)}">
         ${this.renderTemplate()}
       </span>
     `;
   }
 };
-m = L([
-  y({
+m = A([
+  f({
     dir: O(),
     "data-action": ""
   })
 ], m);
-var A = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (e, t, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? x(t, r) : t, a = e.length - 1, n; a >= 0; a--)
+var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? S(t, r) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (s = (i ? n(t, r, s) : n(s)) || s);
-  return i && s && A(t, r, s), s;
+  return i && s && P(t, r, s), s;
 };
-let d = class extends m {
+let h = class extends m {
   constructor() {
-    if (super(), this.type = "button", this.c = async (e) => {
-      if (this.type === "button" || await E(e))
+    if (super(), this.type = "button", this._handleButtonClick = async (e) => {
+      if (this.type === "button" || await C(e))
         return;
       const t = this.form ? this.ownerDocument.querySelector(`form#${this.form}`) : this.closest("form");
       if (t)
         this.type === "submit" ? t.requestSubmit() : this.type === "reset" && t.reset();
       else return;
-    }, this.d = (e) => {
+    }, this._preventScrollOnSpaceKeydown = (e) => {
       e.key === " " && (e.preventDefault(), e.target.toggleAttribute("data-active", !0));
-    }, this.a = (e) => {
+    }, this._removeActiveMarker = (e) => {
       e.target.removeAttribute("data-active");
-    }, this.e = (e) => {
-      e.key === " " && (this.a(e), this.b(e));
-    }, this.b = (e) => {
+    }, this._dispatchClickEventOnSpaceKeyup = (e) => {
+      e.key === " " && (this._removeActiveMarker(e), this._dispatchClickEvent(e));
+    }, this._dispatchClickEvent = (e) => {
       const { altKey: t, ctrlKey: r, metaKey: i, shiftKey: s } = e;
       e.target.dispatchEvent(
         new PointerEvent("click", {
@@ -84,11 +84,11 @@ let d = class extends m {
     }, !g) {
       this.setupBaseEventHandlers();
       const e = { passive: !0 };
-      this.addEventListener("click", this.c), this.addEventListener("keydown", this.d), this.addEventListener("keyup", this.e, e), this.addEventListener("blur", this.a, e), this.addEventListener(
+      this.addEventListener("click", this._handleButtonClick), this.addEventListener("keydown", this._preventScrollOnSpaceKeydown), this.addEventListener("keyup", this._dispatchClickEventOnSpaceKeyup, e), this.addEventListener("blur", this._removeActiveMarker, e), this.addEventListener(
         "keypress",
         (t) => {
           (t.key === "Enter" || t.key === `
-`) && this.b(t);
+`) && this._dispatchClickEvent(t);
         },
         e
       );
@@ -110,33 +110,33 @@ let d = class extends m {
     (!["name", "value"].includes(e) || t !== r) && super.attributeChangedCallback(e, t, r);
   }
 };
-c([
-  o()
-], d.prototype, "type", 2);
-c([
-  o()
-], d.prototype, "name", 1);
-c([
-  o()
-], d.prototype, "value", 1);
-c([
-  o()
-], d.prototype, "form", 2);
-d = c([
-  y({
+u([
+  l()
+], h.prototype, "type", 2);
+u([
+  l()
+], h.prototype, "name", 1);
+u([
+  l()
+], h.prototype, "value", 1);
+u([
+  l()
+], h.prototype, "form", 2);
+h = u([
+  f({
     role: "button",
     tabindex: "0",
     "data-button": ""
   })
-], d);
-var S = Object.defineProperty, j = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(t, r) : t, a = e.length - 1, n; a >= 0; a--)
+], h);
+var L = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? x(t, r) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (s = (i ? n(t, r, s) : n(s)) || s);
-  return i && s && S(t, r, s), s;
+  return i && s && L(t, r, s), s;
 };
-let p = class extends m {
+let c = class extends m {
   constructor() {
-    super(), this.language = new C(this), this.a = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : l, g || this.setupBaseEventHandlers();
+    super(), this.language = new E(this), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : o, g || this.setupBaseEventHandlers();
   }
   /** @internal */
   focus(e) {
@@ -155,56 +155,56 @@ let p = class extends m {
   }
   /** Default render method for link-like components. Can be overridden if the LinkRenderVariables are not needed. */
   render() {
-    return f`
+    return v`
       <a
-        class="sbb-action-base ${this.localName ?? $(this)}"
-        href=${this.href || l}
+        class="sbb-action-base ${this.localName ?? _(this)}"
+        href=${this.href || o}
         ?download=${this.download}
-        target=${this.target || l}
-        rel=${this.a()}
-        aria-label=${this.accessibilityLabel || l}
-        tabindex=${this.maybeDisabled ? "-1" : l}
-        aria-disabled=${this.maybeDisabled ? "true" : l}
+        target=${this.target || o}
+        rel=${this._evaluateRelAttribute()}
+        aria-label=${this.accessibilityLabel || o}
+        tabindex=${this.maybeDisabled ? "-1" : o}
+        aria-disabled=${this.maybeDisabled ? "true" : o}
       >
         ${this.renderTemplate()}
-        ${this.href && this.target === "_blank" ? f`<sbb-screen-reader-only
-              >. ${D[this.language.current]}</sbb-screen-reader-only
-            >` : l}
+        ${this.href && this.target === "_blank" ? v`<sbb-screen-reader-only
+              >. ${$[this.language.current]}</sbb-screen-reader-only
+            >` : o}
       </a>
     `;
   }
 };
-u([
-  o()
-], p.prototype, "href", 2);
-u([
-  o()
-], p.prototype, "target", 2);
-u([
-  o()
-], p.prototype, "rel", 2);
-u([
-  o({ type: Boolean })
-], p.prototype, "download", 2);
-u([
-  o({ attribute: "accessibility-label" })
-], p.prototype, "accessibilityLabel", 2);
-p = u([
-  y({
+d([
+  l()
+], c.prototype, "href", 2);
+d([
+  l()
+], c.prototype, "target", 2);
+d([
+  l()
+], c.prototype, "rel", 2);
+d([
+  l({ type: Boolean })
+], c.prototype, "download", 2);
+d([
+  l({ attribute: "accessibility-label" })
+], c.prototype, "accessibilityLabel", 2);
+c = d([
+  f({
     "data-link": ""
   })
-], p);
-const h = class h extends w {
+], c);
+const p = class p extends w {
   constructor() {
     super(...arguments), this.willOpen = new b(
       this,
-      h.events.willOpen
-    ), this.didOpen = new b(this, h.events.didOpen), this.willClose = new b(
+      p.events.willOpen
+    ), this.didOpen = new b(this, p.events.didOpen), this.willClose = new b(
       this,
-      h.events.willClose
+      p.events.willClose
     ), this.didClose = new b(
       this,
-      h.events.didClose
+      p.events.didClose
     );
   }
   /** The state of the component. */
@@ -218,16 +218,16 @@ const h = class h extends w {
     super.connectedCallback(), this.state || (this.state = "closed");
   }
 };
-h.events = {
+p.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
   willClose: "willClose",
   didClose: "didClose"
 };
-let v = h;
+let y = p;
 export {
   m as SbbActionBaseElement,
-  d as SbbButtonBaseElement,
-  p as SbbLinkBaseElement,
-  v as SbbOpenCloseBaseElement
+  h as SbbButtonBaseElement,
+  c as SbbLinkBaseElement,
+  y as SbbOpenCloseBaseElement
 };