@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/headless/components/dataDisplay/dagView/panZoom.js

@@ -0,0 +1,161 @@
+const I = (e, n, o) => Math.min(o, Math.max(n, e));
+function M(e, n, o, r, c) {
+  const a = I(e.zoom * o, r, c), l = a / e.zoom;
+  return { x: n.x - (n.x - e.x) * l, y: n.y - (n.y - e.y) * l, zoom: a };
+}
+function $(e, n, o, r, c) {
+  const a = { width: Math.max(1, n.width - o * 2), height: Math.max(1, n.height - o * 2) }, l = Math.min(a.width / Math.max(1, e.width), a.height / Math.max(1, e.height)), s = I(l, r, c);
+  return {
+    x: (n.width - e.width * s) / 2 - e.x * s,
+    y: (n.height - e.height * s) / 2 - e.y * s,
+    zoom: s
+  };
+}
+function S(e, n, o) {
+  return {
+    x: o.width / 2 - n.x * e.zoom,
+    y: o.height / 2 - n.y * e.zoom,
+    zoom: e.zoom
+  };
+}
+function W(e, n, o, r = 0) {
+  const c = e.x + n.x * e.zoom, a = e.y + n.y * e.zoom;
+  return c >= r && a >= r && c + n.width * e.zoom <= o.width - r && a + n.height * e.zoom <= o.height - r;
+}
+function K(e, n, o) {
+  const r = n === 1 ? e * 16 : n === 2 ? e * 400 : e, c = I(r, -100, 100) * (o ? 0.01 : 2e-3);
+  return Math.exp(-c);
+}
+const N = (e) => `translate(${Math.round(e.x)}px, ${Math.round(e.y)}px) scale(${Math.round(e.zoom * 1e4) / 1e4})`, B = (e, n) => e.x === n.x && e.y === n.y && e.zoom === n.zoom;
+function R(e, n = {
+  request: (o) => typeof requestAnimationFrame == "function" ? requestAnimationFrame(o) : window.setTimeout(o, 16),
+  cancel: (o) => typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(o) : window.clearTimeout(o)
+}) {
+  let o, r;
+  const c = () => {
+    r !== void 0 && n.cancel(r), r = void 0;
+    const a = o;
+    o = void 0, a && e(a.current);
+  };
+  return {
+    schedule(a) {
+      o = { current: a }, r === void 0 && (r = n.request(() => {
+        r = void 0, c();
+      }));
+    },
+    pending: () => o?.current,
+    flush: c,
+    cancel() {
+      r !== void 0 && n.cancel(r), r = void 0, o = void 0;
+    }
+  };
+}
+const V = "a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]";
+function O(e, n) {
+  const o = n.threshold ?? 3, r = R(n.write), c = () => r.pending() ?? n.viewport(), a = (t) => {
+    B(t, c()) || r.schedule(t);
+  }, l = (t, i) => {
+    const d = e.getBoundingClientRect();
+    return { x: t - d.left, y: i - d.top };
+  }, s = /* @__PURE__ */ new Map(), f = e.ownerDocument;
+  let X = !1;
+  const v = (t) => {
+    t !== X && (X = t, t ? (f.addEventListener("pointermove", A, !0), f.addEventListener("pointerup", E, !0), f.addEventListener("pointercancel", E, !0)) : (f.removeEventListener("pointermove", A, !0), f.removeEventListener("pointerup", E, !0), f.removeEventListener("pointercancel", E, !0)));
+  };
+  let u, m, p = !1, z = !1, Z = !1;
+  const L = (t) => {
+    t !== Z && (Z = t, n.onInteracting?.(t));
+  }, C = () => {
+    const [t, i] = [...s.values()];
+    return { distance: Math.hypot(t.x - i.x, t.y - i.y), mid: { x: (t.x + i.x) / 2, y: (t.y + i.y) / 2 } };
+  }, D = (t) => {
+    if (!(t.button !== 0 && t.pointerType === "mouse" || t.target?.closest?.(V))) {
+      if (s.set(t.pointerId, l(t.clientX, t.clientY)), v(!0), s.size === 1)
+        u = { point: s.get(t.pointerId), viewport: c(), id: t.pointerId }, p = !1;
+      else if (s.size === 2) {
+        const { distance: d, mid: x } = C();
+        m = { distance: d, mid: x, viewport: c() }, u = void 0;
+        for (const h of s.keys()) T(h);
+        L(!0);
+      }
+    }
+  }, T = (t) => {
+    try {
+      e.setPointerCapture?.(t);
+    } catch {
+    }
+  }, A = (t) => {
+    if (!s.has(t.pointerId)) return;
+    const i = l(t.clientX, t.clientY);
+    if (s.set(t.pointerId, i), m && s.size >= 2) {
+      const { distance: h, mid: g } = C(), w = M(
+        m.viewport,
+        m.mid,
+        h / Math.max(1, m.distance),
+        n.minZoom(),
+        n.maxZoom()
+      );
+      a({ ...w, x: w.x + g.x - m.mid.x, y: w.y + g.y - m.mid.y });
+      return;
+    }
+    if (!u || u.id !== t.pointerId) return;
+    const d = i.x - u.point.x, x = i.y - u.point.y;
+    if (!p) {
+      if (Math.hypot(d, x) < o) return;
+      p = !0, T(t.pointerId), L(!0);
+    }
+    a({ x: u.viewport.x + d, y: u.viewport.y + x, zoom: u.viewport.zoom });
+  }, E = (t) => {
+    if (s.delete(t.pointerId)) {
+      if ((p || m) && (z = !0), s.size < 2 && (m = void 0), s.size === 0)
+        v(!1), u = void 0, p = !1, L(!1), r.flush(), setTimeout(() => z = !1, 0);
+      else if (s.size === 1) {
+        const [[i, d]] = [...s.entries()];
+        u = { point: d, viewport: c(), id: i }, p = !0;
+      }
+    }
+  }, F = (t) => {
+    z && (z = !1, t.stopPropagation(), t.preventDefault());
+  }, P = (t) => {
+    const i = t.ctrlKey || t.metaKey, d = n.wheel();
+    if (!i && d === "none") return;
+    if (t.preventDefault(), !i && d === "pan") {
+      const h = c(), g = t.deltaMode === 1 ? 16 : t.deltaMode === 2 ? 400 : 1, w = t.shiftKey && !t.deltaX ? t.deltaY : t.deltaX, G = t.shiftKey && !t.deltaX ? 0 : t.deltaY;
+      a({ x: h.x - w * g, y: h.y - G * g, zoom: h.zoom });
+      return;
+    }
+    const x = K(t.deltaY, t.deltaMode, i);
+    a(M(c(), l(t.clientX, t.clientY), x, n.minZoom(), n.maxZoom()));
+  };
+  let y;
+  const k = (t) => {
+    t.preventDefault();
+    const i = t, d = e.getBoundingClientRect();
+    y = {
+      viewport: c(),
+      point: i.clientX === void 0 ? { x: d.width / 2, y: d.height / 2 } : l(i.clientX, i.clientY ?? 0)
+    };
+  }, Y = (t) => {
+    t.preventDefault();
+    const i = t.scale;
+    !y || typeof i != "number" || a(M(y.viewport, y.point, i, n.minZoom(), n.maxZoom()));
+  }, q = (t) => {
+    t.preventDefault(), y = void 0;
+  };
+  return e.addEventListener("pointerdown", D), e.addEventListener("click", F, !0), e.addEventListener("wheel", P, { passive: !1 }), e.addEventListener("gesturestart", k), e.addEventListener("gesturechange", Y), e.addEventListener("gestureend", q), () => {
+    r.cancel(), v(!1), e.removeEventListener("pointerdown", D), e.removeEventListener("click", F, !0), e.removeEventListener("wheel", P), e.removeEventListener("gesturestart", k), e.removeEventListener("gesturechange", Y), e.removeEventListener("gestureend", q);
+  };
+}
+export {
+  S as centerOn,
+  I as clamp,
+  R as createFrameWriter,
+  O as createPanZoom,
+  $ as fitBounds,
+  W as isVisible,
+  B as sameViewport,
+  N as viewportTransform,
+  K as wheelZoomFactor,
+  M as zoomAt
+};
+//# sourceMappingURL=panZoom.js.map

package/dist/headless/components/dataDisplay/dagView/panZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panZoom.js","sources":["../../../../../src/components/dataDisplay/dagView/panZoom.ts"],"sourcesContent":["// Pan and zoom for a transformed \"world\" inside a viewport element: pure math\n// (unit-tested) and plain DOM glue, with no Solid imports, so a React port can\n// copy the file. The glue reads gestures and hands at most one new viewport per\n// animation frame to `write`.\n\n/** What the world is moved and scaled by: `translate(x, y) scale(zoom)`, origin top left. */\nexport interface Viewport {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface Bounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value));\n\n/** The viewport scaled by `factor` (clamped to min…max), keeping the world point under `point` in place. */\nexport function zoomAt(viewport: Viewport, point: Point, factor: number, min: number, max: number): Viewport {\n  const zoom = clamp(viewport.zoom * factor, min, max);\n  const k = zoom / viewport.zoom;\n  return { x: point.x - (point.x - viewport.x) * k, y: point.y - (point.y - viewport.y) * k, zoom };\n}\n\n/** The viewport that shows `bounds` (world units) whole and centred in a box of `size`, `padding` from its edges. */\nexport function fitBounds(\n  bounds: Bounds,\n  size: { width: number; height: number },\n  padding: number,\n  min: number,\n  max: number\n): Viewport {\n  const room = { width: Math.max(1, size.width - padding * 2), height: Math.max(1, size.height - padding * 2) };\n  const fit = Math.min(room.width / Math.max(1, bounds.width), room.height / Math.max(1, bounds.height));\n  const zoom = clamp(fit, min, max);\n  return {\n    x: (size.width - bounds.width * zoom) / 2 - bounds.x * zoom,\n    y: (size.height - bounds.height * zoom) / 2 - bounds.y * zoom,\n    zoom,\n  };\n}\n\n/** The viewport, at its zoom, that puts the world point `point` in the middle of a box of `size`. */\nexport function centerOn(viewport: Viewport, point: Point, size: { width: number; height: number }): Viewport {\n  return {\n    x: size.width / 2 - point.x * viewport.zoom,\n    y: size.height / 2 - point.y * viewport.zoom,\n    zoom: viewport.zoom,\n  };\n}\n\n/** Whether the world rectangle lies inside the box of `size` at `viewport`, `margin` from its edges. */\nexport function isVisible(\n  viewport: Viewport,\n  rect: Bounds,\n  size: { width: number; height: number },\n  margin = 0\n): boolean {\n  const left = viewport.x + rect.x * viewport.zoom;\n  const top = viewport.y + rect.y * viewport.zoom;\n  return (\n    left >= margin &&\n    top >= margin &&\n    left + rect.width * viewport.zoom <= size.width - margin &&\n    top + rect.height * viewport.zoom <= size.height - margin\n  );\n}\n\n/** The zoom factor for a wheel turn: lines and pages count as many pixels, a pinch (ctrl) zooms faster. */\nexport function wheelZoomFactor(deltaY: number, deltaMode: number, pinch: boolean): number {\n  const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;\n  const step = clamp(pixels, -100, 100) * (pinch ? 0.01 : 0.002);\n  return Math.exp(-step);\n}\n\n/** Rounded translation, so text is not blurred at rest by subpixel offsets. */\nexport const viewportTransform = (viewport: Viewport): string =>\n  `translate(${Math.round(viewport.x)}px, ${Math.round(viewport.y)}px) scale(${Math.round(viewport.zoom * 10000) / 10000})`;\n\nexport const sameViewport = (a: Viewport, b: Viewport): boolean => a.x === b.x && a.y === b.y && a.zoom === b.zoom;\n\n/**\n * Coalesces writes to one per animation frame: `schedule` keeps the latest\n * value, and `write` gets it on the next frame. `pending()` is that latest value\n * until it is written, so a gesture builds on what it asked for, not on what was\n * drawn last.\n */\nexport function createFrameWriter<T>(\n  write: (value: T) => void,\n  frame: { request: (callback: () => void) => number; cancel: (id: number) => void } = {\n    request: (callback) =>\n      typeof requestAnimationFrame === \"function\" ? requestAnimationFrame(callback) : window.setTimeout(callback, 16),\n    cancel: (id) => (typeof cancelAnimationFrame === \"function\" ? cancelAnimationFrame(id) : window.clearTimeout(id)),\n  }\n): { schedule(value: T): void; pending(): T | undefined; flush(): void; cancel(): void } {\n  let value: { current: T } | undefined;\n  let id: number | undefined;\n  const flush = (): void => {\n    if (id !== undefined) frame.cancel(id);\n    id = undefined;\n    const next = value;\n    value = undefined;\n    if (next) write(next.current);\n  };\n  return {\n    schedule(next) {\n      value = { current: next };\n      if (id === undefined)\n        id = frame.request(() => {\n          id = undefined;\n          flush();\n        });\n    },\n    pending: () => value?.current,\n    flush,\n    cancel() {\n      if (id !== undefined) frame.cancel(id);\n      id = undefined;\n      value = undefined;\n    },\n  };\n}\n\nexport type WheelMode = \"zoom\" | \"pan\" | \"none\";\n\nexport interface PanZoomOptions {\n  /** The viewport as drawn now. */\n  viewport: () => Viewport;\n  /** Gets the new viewport, at most once per frame. */\n  write: (viewport: Viewport) => void;\n  minZoom: () => number;\n  maxZoom: () => number;\n  /** Plain wheel: zoom (default), pan, or leave it to the page. Ctrl+wheel (a trackpad pinch) always zooms. */\n  wheel: () => WheelMode;\n  /** True while a drag or pinch is under way. */\n  onInteracting?: (interacting: boolean) => void;\n  /** Pixels a press moves before it pans rather than clicks; 3 by default. */\n  threshold?: number;\n}\n\n/** Targets where a press keeps its own meaning and does not pan: controls, links, fields. */\nconst INTERACTIVE = \"a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]\";\n\n/**\n * Pan and zoom on `el`: drag with a mouse or one finger, pinch with two, wheel,\n * and a Safari trackpad pinch. A drag that moved past the threshold swallows\n * the click that follows it. Returns the function that removes it all.\n */\nexport function createPanZoom(el: HTMLElement, options: PanZoomOptions): () => void {\n  const threshold = options.threshold ?? 3;\n  const writer = createFrameWriter<Viewport>(options.write);\n  const current = (): Viewport => writer.pending() ?? options.viewport();\n  const set = (next: Viewport): void => {\n    if (!sameViewport(next, current())) writer.schedule(next);\n  };\n  const local = (clientX: number, clientY: number): Point => {\n    const rect = el.getBoundingClientRect();\n    return { x: clientX - rect.left, y: clientY - rect.top };\n  };\n\n  const pointers = new Map<number, Point>();\n  // While a press is held, its moves and release are read on the document: a\n  // quick drag can leave the box before the threshold, when the pointer is\n  // captured, and the box would see nothing more of it. A captured pointer's\n  // events still reach the document, through the box.\n  const doc = el.ownerDocument;\n  let following = false;\n  const follow = (on: boolean): void => {\n    if (on === following) return;\n    following = on;\n    if (on) {\n      doc.addEventListener(\"pointermove\", onPointerMove, true);\n      doc.addEventListener(\"pointerup\", onPointerUp, true);\n      doc.addEventListener(\"pointercancel\", onPointerUp, true);\n    } else {\n      doc.removeEventListener(\"pointermove\", onPointerMove, true);\n      doc.removeEventListener(\"pointerup\", onPointerUp, true);\n      doc.removeEventListener(\"pointercancel\", onPointerUp, true);\n    }\n  };\n  let start: { point: Point; viewport: Viewport; id: number } | undefined;\n  let pinch: { distance: number; mid: Point; viewport: Viewport } | undefined;\n  let panning = false;\n  let swallowClick = false;\n  let interacting = false;\n  const setInteracting = (value: boolean): void => {\n    if (value === interacting) return;\n    interacting = value;\n    options.onInteracting?.(value);\n  };\n\n  const pinchState = (): { distance: number; mid: Point } => {\n    const [a, b] = [...pointers.values()] as [Point, Point];\n    return { distance: Math.hypot(a.x - b.x, a.y - b.y), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (event.button !== 0 && event.pointerType === \"mouse\") return;\n    const target = event.target as Element | null;\n    if (target?.closest?.(INTERACTIVE)) return;\n    pointers.set(event.pointerId, local(event.clientX, event.clientY));\n    follow(true);\n    if (pointers.size === 1) {\n      start = { point: pointers.get(event.pointerId)!, viewport: current(), id: event.pointerId };\n      panning = false;\n    } else if (pointers.size === 2) {\n      const { distance, mid } = pinchState();\n      pinch = { distance, mid, viewport: current() };\n      start = undefined;\n      // A second finger makes it a gesture: take both pointers.\n      for (const id of pointers.keys()) capture(id);\n      setInteracting(true);\n    }\n  };\n\n  const capture = (id: number): void => {\n    try {\n      el.setPointerCapture?.(id);\n    } catch {\n      // The pointer is gone already.\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!pointers.has(event.pointerId)) return;\n    const point = local(event.clientX, event.clientY);\n    pointers.set(event.pointerId, point);\n    if (pinch && pointers.size >= 2) {\n      const { distance, mid } = pinchState();\n      const scaled = zoomAt(\n        pinch.viewport,\n        pinch.mid,\n        distance / Math.max(1, pinch.distance),\n        options.minZoom(),\n        options.maxZoom()\n      );\n      set({ ...scaled, x: scaled.x + mid.x - pinch.mid.x, y: scaled.y + mid.y - pinch.mid.y });\n      return;\n    }\n    if (!start || start.id !== event.pointerId) return;\n    const dx = point.x - start.point.x;\n    const dy = point.y - start.point.y;\n    if (!panning) {\n      if (Math.hypot(dx, dy) < threshold) return;\n      // Captured only now: a capture from the press would take the click from the node under it.\n      panning = true;\n      capture(event.pointerId);\n      setInteracting(true);\n    }\n    set({ x: start.viewport.x + dx, y: start.viewport.y + dy, zoom: start.viewport.zoom });\n  };\n\n  const onPointerUp = (event: PointerEvent): void => {\n    if (!pointers.delete(event.pointerId)) return;\n    if (panning || pinch) swallowClick = true;\n    if (pointers.size < 2) pinch = undefined;\n    if (pointers.size === 0) {\n      follow(false);\n      start = undefined;\n      panning = false;\n      setInteracting(false);\n      writer.flush();\n      // A click comes right after the release, or not at all.\n      setTimeout(() => (swallowClick = false), 0);\n    } else if (pointers.size === 1) {\n      // One finger left after a pinch: it pans from here.\n      const [[id, point]] = [...pointers.entries()] as [[number, Point]];\n      start = { point, viewport: current(), id };\n      panning = true;\n    }\n  };\n\n  const onClick = (event: MouseEvent): void => {\n    if (!swallowClick) return;\n    swallowClick = false;\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  const onWheel = (event: WheelEvent): void => {\n    const pinchGesture = event.ctrlKey || event.metaKey;\n    const mode = options.wheel();\n    if (!pinchGesture && mode === \"none\") return;\n    event.preventDefault();\n    if (!pinchGesture && mode === \"pan\") {\n      const v = current();\n      const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;\n      const dx = event.shiftKey && !event.deltaX ? event.deltaY : event.deltaX;\n      const dy = event.shiftKey && !event.deltaX ? 0 : event.deltaY;\n      set({ x: v.x - dx * scale, y: v.y - dy * scale, zoom: v.zoom });\n      return;\n    }\n    const factor = wheelZoomFactor(event.deltaY, event.deltaMode, pinchGesture);\n    set(zoomAt(current(), local(event.clientX, event.clientY), factor, options.minZoom(), options.maxZoom()));\n  };\n\n  // Safari reports a trackpad pinch as gesture events, with the scale since the gesture began.\n  let gesture: { viewport: Viewport; point: Point } | undefined;\n  const onGestureStart = (event: Event): void => {\n    event.preventDefault();\n    const e = event as Event & { clientX?: number; clientY?: number };\n    const rect = el.getBoundingClientRect();\n    gesture = {\n      viewport: current(),\n      point: e.clientX === undefined ? { x: rect.width / 2, y: rect.height / 2 } : local(e.clientX, e.clientY ?? 0),\n    };\n  };\n  const onGestureChange = (event: Event): void => {\n    event.preventDefault();\n    const scale = (event as Event & { scale?: number }).scale;\n    if (!gesture || typeof scale !== \"number\") return;\n    set(zoomAt(gesture.viewport, gesture.point, scale, options.minZoom(), options.maxZoom()));\n  };\n  const onGestureEnd = (event: Event): void => {\n    event.preventDefault();\n    gesture = undefined;\n  };\n\n  el.addEventListener(\"pointerdown\", onPointerDown);\n  el.addEventListener(\"click\", onClick, true);\n  el.addEventListener(\"wheel\", onWheel, { passive: false });\n  el.addEventListener(\"gesturestart\", onGestureStart);\n  el.addEventListener(\"gesturechange\", onGestureChange);\n  el.addEventListener(\"gestureend\", onGestureEnd);\n\n  return () => {\n    writer.cancel();\n    follow(false);\n    el.removeEventListener(\"pointerdown\", onPointerDown);\n    el.removeEventListener(\"click\", onClick, true);\n    el.removeEventListener(\"wheel\", onWheel);\n    el.removeEventListener(\"gesturestart\", onGestureStart);\n    el.removeEventListener(\"gesturechange\", onGestureChange);\n    el.removeEventListener(\"gestureend\", onGestureEnd);\n  };\n}\n"],"names":["clamp","value","min","max","zoomAt","viewport","point","factor","zoom","k","fitBounds","bounds","size","padding","room","fit","centerOn","isVisible","rect","margin","left","top","wheelZoomFactor","deltaY","deltaMode","pinch","pixels","step","viewportTransform","sameViewport","a","b","createFrameWriter","write","frame","callback","id","flush","next","INTERACTIVE","createPanZoom","el","options","threshold","writer","current","set","local","clientX","clientY","pointers","doc","following","follow","on","onPointerMove","onPointerUp","start","panning","swallowClick","interacting","setInteracting","pinchState","onPointerDown","event","distance","mid","capture","scaled","dx","dy","onClick","onWheel","pinchGesture","mode","v","scale","gesture","onGestureStart","e","onGestureChange","onGestureEnd"],"mappings":"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"}

package/dist/headless/components/dataDisplay/descriptionList/descriptionList.js

@@ -1,35 +1,31 @@
 import { use as p, spread as a, mergeProps as u, insert as n, createComponent as d, template as f } from "solid-js/web";
-import { splitProps as _, mergeProps as g, createMemo as $, For as b } from "solid-js";
-import h from "clsx";
-import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
-var w = /* @__PURE__ */ f("<div><dt class=smwb-description-list__term></dt><dd class=smwb-description-list__details>"), v = /* @__PURE__ */ f("<dl>");
+import { splitProps as _, mergeProps as y, createMemo as $, For as b } from "solid-js";
+import g from "clsx";
+import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as w } from "../../../primitives/mergeStyle.js";
+var v = /* @__PURE__ */ f("<div><dt class=smwb-description-list__term></dt><dd class=smwb-description-list__details>"), P = /* @__PURE__ */ f("<dl>");
 function W(l) {
   const [r, e] = _(l, ["class", "term", "children", "ref"]);
   return (() => {
-    var s = w(), i = s.firstChild, o = i.nextSibling, t = y(r.ref);
+    var s = v(), i = s.firstChild, o = i.nextSibling, t = h(r.ref);
     return typeof t == "function" && p(t, s), a(s, u(e, {
       get class() {
-        return h("smwb-description-list__item", r.class);
+        return g("smwb-description-list__item", r.class);
       }
     }), !1, !0), n(i, () => r.term), n(o, () => r.children), s;
   })();
 }
-function F(l) {
-  const r = g({
+function I(l) {
+  const r = y({
     layout: "auto"
-  }, l), [e, s] = _(r, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]), i = $(() => e.items ?? []), o = () => {
-    if (e.termWidth === void 0) return e.style;
-    const t = typeof e.termWidth == "number" ? `${e.termWidth}px` : e.termWidth;
-    return typeof e.style == "string" ? `${e.style};--smwb-description-term:${t}` : {
-      ...e.style,
-      "--smwb-description-term": t
-    };
-  };
+  }, l), [e, s] = _(r, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]), i = $(() => e.items ?? []), o = () => w(e.style, {
+    "--smwb-description-term": typeof e.termWidth == "number" ? `${e.termWidth}px` : e.termWidth
+  });
   return (() => {
-    var t = v(), m = y(e.ref);
+    var t = P(), m = h(e.ref);
     return typeof m == "function" && p(m, t), a(t, u(s, {
       get class() {
-        return h("smwb-description-list", `smwb-description-list_${e.layout}`, {
+        return g("smwb-description-list", `smwb-description-list_${e.layout}`, {
           "smwb-description-list_dense": e.dense
         }, e.class);
       },
@@ -53,6 +49,6 @@ function F(l) {
 }
 export {
   W as DescriptionItem,
-  F as DescriptionList
+  I as DescriptionList
 };
 //# sourceMappingURL=descriptionList.js.map

package/dist/headless/components/dataDisplay/descriptionList/descriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"descriptionList.js","sources":["../../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.termWidth === undefined) return local.style;\n    const width = typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-description-term:${width}`;\n    return { ...local.style, \"--smwb-description-term\": width };\n  };\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","props","local","rest","splitProps","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","term","children","DescriptionList","merged","mergeProps","layout","items","createMemo","style","termWidth","undefined","width","_el$4","_tmpl$2","_ref$2","dense","_$createComponent","For","each","item","description"],"mappings":";;;;;AAkCO,SAASA,EAAgBC,GAAuD;AACrF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACsBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAN,CAAA,GAAAU,EAAAV,GAAAW,EAA/Bb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,+BAA+Bf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MACpDL,EAAMkB,IAAI,GAAAD,EAAAV,GAAA,MACPP,EAAMmB,QAAQ,GAAAhB;AAAAA,EAAA,GAAA;AAGhE;AAGO,SAASiB,EAAgBrB,GAAuD;AACrF,QAAMsB,IAASC,EAAW;AAAA,IAAEC,QAAQ;AAAA,EAAA,GAAmCxB,CAAK,GACtE,CAACC,GAAOC,CAAI,IAAIC,EAAWmB,GAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC,GAKjHG,IAAQC,EAAW,MAAMzB,EAAMwB,SAAS,CAAA,CAAE,GAE1CE,IAAQA,MAA8C;AAC1D,QAAI1B,EAAM2B,cAAcC,OAAW,QAAO5B,EAAM0B;AAChD,UAAMG,IAAQ,OAAO7B,EAAM2B,aAAc,WAAW,GAAG3B,EAAM2B,SAAS,OAAO3B,EAAM2B;AACnF,WAAI,OAAO3B,EAAM0B,SAAU,WAAiB,GAAG1B,EAAM0B,KAAK,4BAA4BG,CAAK,KACpF;AAAA,MAAE,GAAG7B,EAAM0B;AAAAA,MAAO,2BAA2BG;AAAAA,IAAAA;AAAAA,EACtD;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGStB,EAAUV,EAAMW,GAAG;AAAC,kBAAAqB,KAAA,cAAApB,EAAAoB,GAAAF,CAAA,GAAAjB,EAAAiB,GAAAhB,EADrBb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDc,EACL,yBACA,yBAAyBf,EAAMuB,MAAM,IACrC;AAAA,UAAE,+BAA+BvB,EAAMiC;AAAAA,QAAAA,GACvCjC,EAAMgB,KACR;AAAA,MAAC;AAAA,MAAA,IACDU,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAa,GAAAI,EAEbC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEZ,EAAAA;AAAAA,MAAO;AAAA,MAAAL,UAAIkB,CAAAA,MAAIH,EAAMpC,GAAe;AAAA,QAAA,IAACoB,OAAI;AAAA,iBAAEmB,EAAKnB;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAGkB,EAAKC;AAAAA,QAAW;AAAA,MAAA,CAAA;AAAA,IAAA,CAAmB,GAAA,IAAA,GAAArB,EAAAa,GAAA,MACpG9B,EAAMmB,UAAQ,IAAA,GAAAW;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"descriptionList.js","sources":["../../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list is at least 420px\n * wide, above it when narrower (a container query on the list itself). `row`\n * and `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  /**\n   * \"auto\" (default): each term beside its value while the list is at least\n   * 420px wide, above it when narrower — the list's own width decides. So its\n   * content does not widen it: where the parent takes its width from its\n   * content (a flex item that does not grow, a popover, a table cell) the list\n   * has no width; give it one there, or use \"row\" / \"stacked\", which fix one\n   * layout and take their width from their content.\n   */\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      \"--smwb-description-term\": typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth,\n    });\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","props","local","rest","splitProps","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","term","children","DescriptionList","merged","mergeProps","layout","items","createMemo","style","mergeStyle","termWidth","_el$4","_tmpl$2","_ref$2","dense","_$createComponent","For","each","item","description"],"mappings":";;;;;;AA2CO,SAASA,EAAgBC,GAAuD;AACrF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACsBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAN,CAAA,GAAAU,EAAAV,GAAAW,EAA/Bb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,+BAA+Bf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MACpDL,EAAMkB,IAAI,GAAAD,EAAAV,GAAA,MACPP,EAAMmB,QAAQ,GAAAhB;AAAAA,EAAA,GAAA;AAGhE;AAGO,SAASiB,EAAgBrB,GAAuD;AACrF,QAAMsB,IAASC,EAAW;AAAA,IAAEC,QAAQ;AAAA,EAAA,GAAmCxB,CAAK,GACtE,CAACC,GAAOC,CAAI,IAAIC,EAAWmB,GAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC,GAKjHG,IAAQC,EAAW,MAAMzB,EAAMwB,SAAS,CAAA,CAAE,GAE1CE,IAAQA,MACZC,EAAW3B,EAAM0B,OAAO;AAAA,IACtB,2BAA2B,OAAO1B,EAAM4B,aAAc,WAAW,GAAG5B,EAAM4B,SAAS,OAAO5B,EAAM4B;AAAAA,EAAAA,CACjG;AAEH,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSrB,EAAUV,EAAMW,GAAG;AAAC,kBAAAoB,KAAA,cAAAnB,EAAAmB,GAAAF,CAAA,GAAAhB,EAAAgB,GAAAf,EADrBb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDc,EACL,yBACA,yBAAyBf,EAAMuB,MAAM,IACrC;AAAA,UAAE,+BAA+BvB,EAAMgC;AAAAA,QAAAA,GACvChC,EAAMgB,KACR;AAAA,MAAC;AAAA,MAAA,IACDU,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAY,GAAAI,EAEbC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEX,EAAAA;AAAAA,MAAO;AAAA,MAAAL,UAAIiB,CAAAA,MAAIH,EAAMnC,GAAe;AAAA,QAAA,IAACoB,OAAI;AAAA,iBAAEkB,EAAKlB;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAGiB,EAAKC;AAAAA,QAAW;AAAA,MAAA,CAAA;AAAA,IAAA,CAAmB,GAAA,IAAA,GAAApB,EAAAY,GAAA,MACpG7B,EAAMmB,UAAQ,IAAA,GAAAU;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/headless/components/dataDisplay/expansionPanel/expansionPanel.js

@@ -1,173 +1,206 @@
-import { createComponent as o, insert as r, Portal as L, addEventListener as S, isServer as P, template as m, use as B, effect as A, className as D, memo as h, delegateEvents as T } from "solid-js/web";
-import { mergeProps as I, splitProps as K, createEffect as y, onCleanup as E, Show as $ } from "solid-js";
-import N from "clsx";
-import { createControllableState as U } from "../../../primitives/createControllableState.js";
-import { mergeRefs as V } from "../../../primitives/mergeRefs.js";
-import { Button as p } from "../../inputs/button/button.js";
-import { Icon as _ } from "../../base/icon/icon.js";
-var j = /* @__PURE__ */ m("<div class=smwb-expansion-panel__controls>"), q = /* @__PURE__ */ m("<div data-testid=expansion-panel><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class=smwb-expansion-panel__body>"), G = /* @__PURE__ */ m("<div class=smwb-expansion-panel__placeholder data-testid=expansion-panel-placeholder><span>"), H = /* @__PURE__ */ m('<div class="smwb-expansion-panel__overlay smwb-dark"role=dialog aria-modal=true data-testid=expansion-panel-overlay><div class=smwb-expansion-panel__dialog><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">');
-const J = {
+import { createComponent as a, insert as u, Portal as H, use as A, isServer as j, template as g, effect as J, className as Q, memo as D, delegateEvents as W } from "solid-js/web";
+import { mergeProps as X, splitProps as Y, createEffect as y, onCleanup as E, on as Z, Show as K } from "solid-js";
+import ee from "clsx";
+import { createControllableState as ne } from "../../../primitives/createControllableState.js";
+import { FOCUSABLE as T } from "../../../primitives/createFocusTrap.js";
+import { mergeRefs as te } from "../../../primitives/mergeRefs.js";
+import { hasOverlayLayerAbove as z } from "../../../primitives/overlayLayer.js";
+import { Button as h } from "../../inputs/button/button.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var le = /* @__PURE__ */ g("<div class=smwb-expansion-panel__controls>"), oe = /* @__PURE__ */ g("<div data-testid=expansion-panel><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class=smwb-expansion-panel__body>"), re = /* @__PURE__ */ g("<div class=smwb-expansion-panel__placeholder data-testid=expansion-panel-placeholder><span>"), se = /* @__PURE__ */ g('<div class="smwb-expansion-panel__overlay smwb-dark"data-smwb-overlay-layer role=dialog aria-modal=true tabindex=-1 data-testid=expansion-panel-overlay><div class=smwb-expansion-panel__dialog><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">');
+const ae = {
   expandRow: "Expand to full row",
   collapseRow: "Collapse to grid",
   expandFullscreen: "Expand to fullscreen",
   closeFullscreen: "Close fullscreen",
   placeholder: "Panel is open in fullscreen",
   placeholderClose: "Close"
-};
-function le(F) {
-  const k = I({
+}, B = (b) => {
+  for (const s of b)
+    if (!(!(s instanceof HTMLElement) || !s.isConnected) && (s.focus(), s.getRootNode().activeElement === s))
+      return;
+}, N = (b) => Array.from(b.querySelectorAll(T)).filter(
+  // Older browsers (and jsdom) lack checkVisibility: count every match there.
+  (s) => typeof s.checkVisibility != "function" || s.checkVisibility({
+    visibilityProperty: !0
+  })
+);
+function ve(b) {
+  const s = X({
     defaultMode: "tile",
     disableExpand: !1,
     noControls: !1,
     closeOnOutsideClick: !0,
     closeOnEsc: !0
-  }, F), [n] = K(k, ["class", "header", "mode", "defaultMode", "onModeChange", "disableExpand", "noControls", "renderControls", "closeOnOutsideClick", "closeOnEsc", "labels", "children", "ref"]), [R, s] = U({
-    value: () => n.mode,
-    defaultValue: n.defaultMode,
-    onChange: (e) => n.onModeChange?.(e)
-  }), t = () => ({
-    ...J,
-    ...n.labels
-  }), c = () => n.disableExpand ? "tile" : R(), a = () => c() === "row", f = () => c() === "fullscreen", b = () => s((e) => e === "row" ? "tile" : "row"), w = () => s("fullscreen"), v = () => s("tile"), O = (e) => ({
-    mode: c(),
+  }, b), [l] = Y(s, ["class", "header", "mode", "defaultMode", "onModeChange", "disableExpand", "noControls", "renderControls", "closeOnOutsideClick", "closeOnEsc", "labels", "children", "ref"]), [I, f] = ne({
+    value: () => l.mode,
+    defaultValue: l.defaultMode,
+    onChange: (e) => l.onModeChange?.(e)
+  }), o = () => ({
+    ...ae,
+    ...l.labels
+  }), v = () => l.disableExpand ? "tile" : I(), p = () => v() === "row", m = () => v() === "fullscreen", k = () => f((e) => e === "row" ? "tile" : "row"), F = () => f("fullscreen"), C = () => f("tile"), U = (e) => {
+    l.closeOnOutsideClick && e.target === e.currentTarget && C();
+  }, V = (e) => ({
+    mode: v(),
     isFullscreen: e,
-    isFullRow: e ? !1 : a(),
-    setMode: s,
-    toggleRow: b,
-    openFullscreen: w,
-    closeFullscreen: v,
-    labels: t()
-  }), x = (e) => {
-    const l = {
-      mode: c(),
+    isFullRow: e ? !1 : p(),
+    setMode: f,
+    toggleRow: k,
+    openFullscreen: F,
+    closeFullscreen: C,
+    labels: o()
+  }), O = (e) => {
+    const n = l.children;
+    return typeof n != "function" ? n : n({
+      mode: v(),
       isFullscreen: e,
-      isFullRow: e ? !1 : a()
-    };
-    return typeof n.children == "function" ? n.children(l) : n.children;
-  }, z = (e) => e ? o(p, {
+      isFullRow: e ? !1 : p()
+    });
+  }, q = (e) => e ? a(h, {
+    ref: (n) => S = n,
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-label"() {
-      return t().closeFullscreen;
+      return o().closeFullscreen;
     },
     get title() {
-      return t().closeFullscreen;
+      return o().closeFullscreen;
     },
-    onClick: v,
+    onClick: C,
     "data-testid": "expansion-panel-close",
     get icon() {
-      return o(_, {
+      return a($, {
         name: "close",
         size: 18
       });
     }
-  }) : [o(p, {
+  }) : [a(h, {
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-pressed"() {
-      return a();
+      return p();
     },
     get "aria-label"() {
-      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+      return D(() => !!p())() ? o().collapseRow : o().expandRow;
     },
     get title() {
-      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+      return D(() => !!p())() ? o().collapseRow : o().expandRow;
     },
-    onClick: b,
+    onClick: k,
     "data-testid": "expansion-panel-row",
     get icon() {
-      return o(_, {
+      return a($, {
         get name() {
-          return a() ? "grid_view" : "table_rows";
+          return p() ? "grid_view" : "table_rows";
         },
         size: 18
       });
     }
-  }), o(p, {
+  }), a(h, {
+    ref: (n) => L = n,
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-label"() {
-      return t().expandFullscreen;
+      return o().expandFullscreen;
     },
     get title() {
-      return t().expandFullscreen;
+      return o().expandFullscreen;
     },
-    onClick: w,
+    onClick: F,
     "data-testid": "expansion-panel-fullscreen",
     get icon() {
-      return o(_, {
+      return a($, {
         name: "open_in_full",
         size: 18
       });
     }
-  })], C = (e) => {
-    if (n.disableExpand || n.noControls) return null;
-    const l = n.renderControls ? typeof n.renderControls == "function" ? n.renderControls(O(e)) : n.renderControls : z(e);
-    return o($, {
-      when: l,
+  })], R = (e) => {
+    if (l.disableExpand || l.noControls) return null;
+    const n = l.renderControls, t = n ? typeof n == "function" ? n(V(e)) : n : q(e);
+    return a(K, {
+      when: t,
       children: (i) => (() => {
-        var d = j();
-        return r(d, () => i()), d;
+        var r = le();
+        return u(r, () => i()), r;
       })()
     });
   };
   y(() => {
-    if (!f()) return;
+    if (!m()) return;
     const e = document.body.style.overflow;
     document.body.style.overflow = "hidden", E(() => {
       document.body.style.overflow = e;
     });
+  });
+  let _;
+  y(() => {
+    if (!m() || !l.closeOnEsc) return;
+    const e = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && !z(_) && (n.preventDefault(), f("tile"));
+    };
+    document.addEventListener("keydown", e), E(() => document.removeEventListener("keydown", e));
+  });
+  let P, L, S, M = null, x = null;
+  y(Z(m, (e, n) => {
+    const t = document.activeElement;
+    e ? (M = t === document.body ? null : t, x = null) : n && (!t || t === document.body) && B([x, M, L, ...Array.from(P?.querySelectorAll(T) ?? [])]);
+  })), y(() => {
+    const e = _, n = document.activeElement;
+    !m() || !e?.isConnected || n && n !== document.body || B([S, ...N(e), e]);
   }), y(() => {
-    if (!f() || !n.closeOnEsc) return;
-    const e = (l) => {
-      l.key === "Escape" && s("tile");
+    if (!m()) return;
+    const e = (n) => {
+      const t = _;
+      if (n.key !== "Tab" || n.defaultPrevented || n.altKey || n.ctrlKey || n.metaKey || !t?.isConnected) return;
+      const i = N(t), r = i[0] ?? t, c = i[i.length - 1] ?? t, d = document.activeElement;
+      let w;
+      d && d !== document.body && t.contains(d) ? (n.shiftKey ? d === r || d === t : d === c) && (w = n.shiftKey ? c : r) : !z(t) && (!d || d === document.body || t.compareDocumentPosition(d) & Node.DOCUMENT_POSITION_PRECEDING) && (w = n.shiftKey ? c : r), w && (n.preventDefault(), w.focus());
     };
     document.addEventListener("keydown", e), E(() => document.removeEventListener("keydown", e));
   });
-  const M = () => (() => {
-    var e = q(), l = e.firstChild, i = l.firstChild, d = l.nextSibling, u = V(n.ref);
-    return typeof u == "function" && B(u, e), r(i, () => n.header), r(l, () => C(!1), null), r(d, () => x(!1)), A(() => D(e, N("smwb-expansion-panel", {
-      "smwb-expansion-panel_row": a()
-    }, n.class))), e;
+  const G = () => (() => {
+    var e = oe(), n = e.firstChild, t = n.firstChild, i = n.nextSibling, r = te(l.ref, (c) => P = c);
+    return typeof r == "function" && A(r, e), u(t, () => l.header), u(n, () => R(!1), null), u(i, () => O(!1)), J(() => Q(e, ee("smwb-expansion-panel", {
+      "smwb-expansion-panel_row": p()
+    }, l.class))), e;
   })();
-  return o($, {
+  return a(K, {
     get when() {
-      return f();
+      return m();
     },
     get fallback() {
-      return M();
+      return G();
     },
     get children() {
       return [(() => {
-        var e = G(), l = e.firstChild;
-        return r(l, () => t().placeholder), r(e, o(p, {
+        var e = re(), n = e.firstChild;
+        return u(n, () => o().placeholder), u(e, a(h, {
           type: "button",
           variant: "outlined",
           size: "small",
           get label() {
-            return t().placeholderClose;
+            return o().placeholderClose;
           },
-          onClick: () => s("tile")
+          onClick: () => f("tile")
         }), null), e;
-      })(), o(L, {
+      })(), a(H, {
         get mount() {
-          return P ? void 0 : document.body;
+          return j ? void 0 : document.body;
         },
         get children() {
-          var e = H(), l = e.firstChild, i = l.firstChild, d = i.firstChild, u = i.nextSibling;
-          return S(e, "click", n.closeOnOutsideClick ? (g) => {
-            g.target === g.currentTarget && s("tile");
-          } : void 0, !0), r(d, () => n.header), r(i, () => C(!0), null), r(u, () => x(!0)), e;
+          var e = se(), n = e.firstChild, t = n.firstChild, i = t.firstChild, r = t.nextSibling;
+          return e.$$click = U, e.$$focusin = (c) => x = c.target, A((c) => _ = c, e), u(i, () => l.header), u(t, () => R(!0), null), u(r, () => O(!0)), e;
         }
       })];
     }
   });
 }
-T(["click"]);
+W(["focusin", "click"]);
 export {
-  le as ExpansionPanel
+  ve as ExpansionPanel
 };
 //# sourceMappingURL=expansionPanel.js.map