@sbb-esta/lyne-elements 1.7.0 → 1.8.0

package/core/controllers.js

@@ -1,7 +1,7 @@
-import { isServer as d } from "lit";
+import { isServer as c } from "lit";
 import { readConfig as u } from "./config.js";
 import { AgnosticMutationObserver as _ } from "./observers.js";
-class b {
+class C {
   constructor(t) {
     this._host = t, this._abortController = new AbortController(), this._host.addController(this);
   }
@@ -17,14 +17,57 @@ class b {
     (t = this._abortController) == null || t.abort(), this._abortController = void 0;
   }
 }
+const b = ["script", "head", "template", "style"], f = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set();
+class E {
+  constructor(t, i = f, r = g) {
+    var s, o;
+    this._host = t, this._inertElements = i, this._inertOverlays = r, (o = (s = this._host).addController) == null || o.call(s, this);
+  }
+  hostConnected() {
+    this._host.isOpen && this.activate();
+  }
+  hostDisconnected() {
+    this._inertOverlays.has(this._host) && this.deactivate();
+  }
+  /** Applies inert state to every other element on the page except the overlay. */
+  activate() {
+    this._inertOverlays.size && this._removeInertAttributes(), this._inertOverlays.add(this._host), this._addInertAttributes();
+  }
+  /** Removes inert state. */
+  deactivate() {
+    if (this._currentOverlay() !== this._host) {
+      this._inertOverlays.has(this._host) && this._inertOverlays.delete(this._host);
+      return;
+    }
+    this._removeInertAttributes(), this._inertOverlays.delete(this._host), this._inertOverlays.size && this._addInertAttributes();
+  }
+  _currentOverlay() {
+    return [...this._inertOverlays].pop() ?? null;
+  }
+  _removeInertAttributes() {
+    this._inertElements.forEach((t) => {
+      t && (t.hasAttribute("data-sbb-inert") && (t.inert = !1, t.removeAttribute("data-sbb-inert")), t.hasAttribute("data-sbb-aria-hidden") && (t.removeAttribute("aria-hidden"), t.removeAttribute("data-sbb-aria-hidden")));
+    }), this._inertElements.clear();
+  }
+  _addInertAttributes() {
+    var i, r;
+    let t = this._currentOverlay();
+    for (; t !== document.documentElement && t !== null; )
+      Array.from(((i = (t == null ? void 0 : t.parentElement) ?? (t == null ? void 0 : t.getRootNode())) == null ? void 0 : i.childNodes) ?? []).filter(
+        (s) => s !== t && s instanceof window.HTMLElement && !b.includes(s.localName)
+      ).forEach((s) => {
+        this._inertElements.add(s), s.inert || (s.inert = !0, s.toggleAttribute("data-sbb-inert", !0)), s.hasAttribute("aria-hidden") || (s.setAttribute("aria-hidden", "true"), s.toggleAttribute("data-sbb-aria-hidden", !0));
+      }), t = (t == null ? void 0 : t.parentElement) ?? ((r = t == null ? void 0 : t.getRootNode()) == null ? void 0 : r.host) ?? null;
+  }
+}
 const e = class e {
   constructor(t) {
     this._host = t, this._handlers = [], this._host.addController(this);
   }
   /** Get the current language. */
   static get current() {
-    const s = ((u().language ?? (d ? e._defaultLanguage : document.documentElement.getAttribute("lang"))) || e._defaultLanguage).split("-")[0];
-    return e._supportedLocales.includes(s) ? s : e._defaultLanguage;
+    const i = ((u().language ?? (c ? e._defaultLanguage : document.documentElement.getAttribute("lang"))) || e._defaultLanguage).split("-")[0];
+    return e._supportedLocales.includes(i) ? i : e._defaultLanguage;
   }
   /** Get the current language. */
   get current() {
@@ -44,20 +87,20 @@ const e = class e {
     this._previousLanguage = this.current, e._listeners.delete(this), e._listeners.size || e._observer.disconnect();
   }
   _callHandlers(t = !0) {
-    this._handlers.forEach((s) => s()), t && this._host.requestUpdate();
+    this._handlers.forEach((i) => i()), t && this._host.requestUpdate();
   }
 };
 e._defaultLanguage = "en", e._supportedLocales = ["en", "de", "fr", "it"], e._listeners = /* @__PURE__ */ new Set(), e._observer = new _((t) => {
-  t[0].oldValue !== document.documentElement.getAttribute("lang") && e._listeners.forEach((s) => s._callHandlers());
+  t[0].oldValue !== document.documentElement.getAttribute("lang") && e._listeners.forEach((i) => i._callHandlers());
 }), e._observerConfig = {
   attributeFilter: ["lang"],
   attributeOldValue: !0
 };
-let h = e;
-class C {
-  constructor(t, s = null) {
-    this._host = t, this._onChangeCallback = s, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (o) => {
-      this._syncSlots(o.target);
+let d = e;
+class p {
+  constructor(t, i = null) {
+    this._host = t, this._onChangeCallback = i, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (r) => {
+      this._syncSlots(r.target);
     }, this._host.addController(this);
   }
   hostConnected() {
@@ -69,20 +112,21 @@ class C {
     (t = this._host.shadowRoot) == null || t.removeEventListener("slotchange", this._slotchangeHandler);
   }
   _syncSlots(...t) {
-    var n;
-    for (const r of t) {
-      const i = r.name || "unnamed";
-      r.assignedNodes().some((l) => {
-        var a;
-        return "tagName" in l || ((a = l.textContent) == null ? void 0 : a.trim());
-      }) ? this.slots.add(i) : this.slots.delete(i);
+    var s;
+    for (const o of t) {
+      const a = o.name || "unnamed";
+      o.assignedNodes().some((h) => {
+        var l;
+        return "tagName" in h || ((l = h.textContent) == null ? void 0 : l.trim());
+      }) ? this.slots.add(a) : this.slots.delete(a);
     }
-    const s = this._host.getAttribute("data-slot-names"), o = [...this.slots].sort().join(" ");
-    o ? this._host.getAttribute("data-slot-names") !== o && this._host.setAttribute("data-slot-names", o) : this._host.removeAttribute("data-slot-names"), o !== s && ((n = this._onChangeCallback) == null || n.call(this));
+    const i = this._host.getAttribute("data-slot-names"), r = [...this.slots].sort().join(" ");
+    r ? this._host.getAttribute("data-slot-names") !== r && this._host.setAttribute("data-slot-names", r) : this._host.removeAttribute("data-slot-names"), r !== i && ((s = this._onChangeCallback) == null || s.call(this));
   }
 }
 export {
-  b as SbbConnectedAbortController,
-  h as SbbLanguageController,
-  C as SbbSlotStateController
+  C as SbbConnectedAbortController,
+  E as SbbInertController,
+  d as SbbLanguageController,
+  p as SbbSlotStateController
 };

package/core/overlay/overlay.d.ts

@@ -4,17 +4,4 @@ import { TemplateResult } from 'lit';
  * Works in conjunction with the 'overlayGapFixCorners()' function in 'overlay.ts'
  */
 export declare function overlayGapFixCorners(): TemplateResult;
-/**
- * Applies inert to every other element on the page except the overlay.
- */
-export declare function applyInertMechanism(overlay: HTMLElement): void;
-export declare function removeInertMechanism(): void;
-declare global {
-    interface GlobalEventHandlersEventMap {
-        willOpen: CustomEvent<void>;
-        willClose: CustomEvent<void>;
-        didOpen: CustomEvent<void>;
-        didClose: CustomEvent<void>;
-    }
-}
 //# sourceMappingURL=overlay.d.ts.map

package/core/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD;AA4DD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAyB9D;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAqB3C;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC7B;CACF"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD"}

package/core/overlay.js

@@ -1,7 +1,6 @@
-import { html as E } from "lit";
-const x = ":is(sbb-dialog, sbb-navigation, sbb-menu, sbb-overlay)[data-state='opened']";
-function $() {
-  return E`
+import { html as H } from "lit";
+function O() {
+  return H`
     <div class="sbb-gap-fix-wrapper">
       <div class="sbb-gap-fix-corner" id="left"></div>
     </div>
@@ -10,54 +9,7 @@ function $() {
     </div>
   `;
 }
-const O = (t, e) => {
-  let n = t.parentElement;
-  const i = [];
-  for (; n && (i.push(n), n !== e); )
-    n = n.parentElement;
-  return i;
-}, w = (t) => {
-  t.setAttribute(
-    "data-sbb-inert",
-    `${+(t.getAttribute("data-sbb-inert") ?? void 0) + 1 || 0}`
-  );
-}, W = (t) => {
-  t.inert || (t.inert = !0, t.matches(x) ? w(t) : t.toggleAttribute("data-sbb-inert", !0)), t.hasAttribute("aria-hidden") || (t.setAttribute("aria-hidden", "true"), t.toggleAttribute("data-sbb-aria-hidden", !0));
-}, y = (t) => {
-  t.hasAttribute("data-sbb-inert") && (t.inert = !1, t.removeAttribute("data-sbb-inert")), t.hasAttribute("data-sbb-aria-hidden") && (t.removeAttribute("aria-hidden"), t.removeAttribute("data-sbb-aria-hidden"));
-};
-function C(t) {
-  y(t);
-  const e = t.closest("body > *");
-  Array.from(document.querySelectorAll("body > *")).filter(
-    (o) => o !== e
-  ).forEach((o) => W(o));
-  let i = [];
-  const a = O(t, e);
-  for (const o of a)
-    i = i.concat(
-      Array.from(o.children).filter(
-        (c) => c !== t && !a.includes(c)
-      )
-    ), o.matches(x) && w(o);
-  i.forEach((o) => W(o));
-}
-function z() {
-  const t = Array.from(
-    document.documentElement.querySelectorAll(x)
-  );
-  if (t.length) {
-    t.forEach((e) => {
-      const n = +e.getAttribute("data-sbb-inert") - 1;
-      e.setAttribute("data-sbb-inert", `${n}`), n && n < 0 && (y(e), Array.from(e.children).forEach((i) => y(i)));
-    });
-    return;
-  }
-  Array.from(document.documentElement.querySelectorAll("[data-sbb-inert]")).forEach(
-    (e) => y(e)
-  );
-}
-function S(t) {
+function W(t) {
   const e = window.getComputedStyle(t), n = e.display, i = parseInt(e.maxHeight, 10).toString();
   if (n !== "none" && i !== "0")
     return {
@@ -69,58 +21,56 @@ function S(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const a = t.scrollHeight, o = t.clientHeight, c = t.offsetHeight, u = t.scrollWidth, r = t.clientWidth, s = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: a, clientHeight: o, offsetHeight: c, scrollWidth: u, clientWidth: r, offsetWidth: s };
+  const l = t.scrollHeight, o = t.clientHeight, r = t.offsetHeight, b = t.scrollWidth, a = t.clientWidth, s = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: l, clientHeight: o, offsetHeight: r, scrollWidth: b, clientWidth: a, offsetWidth: s };
 }
-function B(t, e) {
+function P(t, e) {
   if (!t || !e)
     return !1;
   const n = t.getBoundingClientRect();
   return n.top <= e.clientY && e.clientY <= n.top + n.height && n.left <= e.clientX && e.clientX <= n.left + n.width;
 }
-function P(t, e, n, i) {
-  const o = (i == null ? void 0 : i.verticalOffset) || 0, c = (i == null ? void 0 : i.horizontalOffset) || 0, u = (i == null ? void 0 : i.responsiveHeight) || !1, r = e.getBoundingClientRect(), s = S(t), f = r.left, m = r.top, g = document.documentElement.clientWidth - (f + r.width), h = m - o, A = document.documentElement.clientHeight - (m + r.height + o);
-  let l = f, p = m + r.height + o, b = s.offsetWidth - r.width;
-  const d = { horizontal: "start", vertical: "below" };
-  let H = `${A - o}px`;
-  i != null && i.centered && f - 16 + r.width / 2 > s.offsetWidth / 2 && g - 16 > b / 2 && (l -= b /= 2, d.horizontal = "center"), g < b && f > b && (l = l - b, d.horizontal = "end"), c && d.horizontal !== "center" && r.width / 2 < c && (l += c * (d.horizontal === "start" ? -1 : 1)), (f < b && g < b || document.documentElement.clientWidth < s.offsetWidth) && (l = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (A - o < s.scrollHeight && h - o > (u ? s.clientHeight : s.scrollHeight) || h > A && A - o < s.clientHeight && !u) && (p = h < s.scrollHeight ? p - r.height - h - o : m - s.clientHeight - o, H = `${h - o}px`, d.vertical = "above");
-  const v = n.getBoundingClientRect();
-  return v.left < 0 && (l -= v.left), v.top < 0 && (p -= v.top), {
-    top: p,
-    left: l,
-    maxHeight: H,
-    alignment: d
+function g(t, e, n, i) {
+  const o = (i == null ? void 0 : i.verticalOffset) || 0, r = (i == null ? void 0 : i.horizontalOffset) || 0, b = (i == null ? void 0 : i.responsiveHeight) || !1, a = e.getBoundingClientRect(), s = W(t), d = a.left, m = a.top, x = document.documentElement.clientWidth - (d + a.width), u = m - o, p = document.documentElement.clientHeight - (m + a.height + o);
+  let c = d, v = m + a.height + o, f = s.offsetWidth - a.width;
+  const h = { horizontal: "start", vertical: "below" };
+  let y = `${p - o}px`;
+  i != null && i.centered && d - 16 + a.width / 2 > s.offsetWidth / 2 && x - 16 > f / 2 && (c -= f /= 2, h.horizontal = "center"), x < f && d > f && (c = c - f, h.horizontal = "end"), r && h.horizontal !== "center" && a.width / 2 < r && (c += r * (h.horizontal === "start" ? -1 : 1)), (d < f && x < f || document.documentElement.clientWidth < s.offsetWidth) && (c = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (p - o < s.scrollHeight && u - o > (b ? s.clientHeight : s.scrollHeight) || u > p && p - o < s.clientHeight && !b) && (v = u < s.scrollHeight ? v - a.height - u - o : m - s.clientHeight - o, y = `${u - o}px`, h.vertical = "above");
+  const A = n.getBoundingClientRect();
+  return A.left < 0 && (c -= A.left), A.top < 0 && (v -= A.top), {
+    top: v,
+    left: c,
+    maxHeight: y,
+    alignment: h
   };
 }
-function I(t, e, n, i, a) {
+function R(t, e, n, i, l) {
   if (!t || !e)
     return;
-  a.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
-  const o = P(n, e, i);
-  a.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), a.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), a.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
+  l.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), l.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
+  const o = g(n, e, i);
+  l.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), l.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), l.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), l.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
 }
-function Y(t, e, n, i) {
+function $(t, e, n, i) {
   t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${i === "opening" || i === "opened"}`));
 }
-function M(t) {
+function z(t) {
   t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
 }
-function X(t, e, n, i = "listbox") {
+function C(t, e, n, i = "listbox") {
   t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", i), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
 }
-function q(t) {
+function B(t) {
   t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
 }
 export {
-  C as applyInertMechanism,
-  P as getElementPosition,
-  S as getElementRectangle,
-  B as isEventOnElement,
-  $ as overlayGapFixCorners,
-  q as removeAriaComboBoxAttributes,
-  M as removeAriaOverlayTriggerAttributes,
-  z as removeInertMechanism,
-  X as setAriaComboBoxAttributes,
-  Y as setAriaOverlayTriggerAttributes,
-  I as setOverlayPosition
+  g as getElementPosition,
+  W as getElementRectangle,
+  P as isEventOnElement,
+  O as overlayGapFixCorners,
+  B as removeAriaComboBoxAttributes,
+  z as removeAriaOverlayTriggerAttributes,
+  C as setAriaComboBoxAttributes,
+  $ as setAriaOverlayTriggerAttributes,
+  R as setOverlayPosition
 };