@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/headless/components/navigation/tabs/tabs.js

@@ -1,26 +1,32 @@
-import { createComponent as b, use as L, spread as H, mergeProps as J, insert as u, effect as h, setAttribute as p, setStyleProperty as x, style as K, template as w, delegateEvents as Q } from "solid-js/web";
-import { mergeProps as U, splitProps as Y, createSignal as m, onMount as k, createEffect as O, on as Z, onCleanup as tt, Show as S } from "solid-js";
-import et from "clsx";
-import { debounce as rt } from "../../../utils/debounce.js";
-import { animate as lt } from "../../../utils/animate.js";
-import { TabsContext as ot } from "./tabsContext.js";
-import { mergeRefs as st } from "../../../primitives/mergeRefs.js";
-import { Icon as T } from "../../base/icon/icon.js";
-var nt = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), at = /* @__PURE__ */ w("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), it = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), ct = /* @__PURE__ */ w("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
-const W = 40, dt = 0.8;
-function _t(I) {
-  const V = U({
+import { createComponent as d, use as S, spread as J, mergeProps as K, insert as u, effect as g, setAttribute as E, setStyleProperty as k, style as Q, template as _, isServer as U, memo as Y, delegateEvents as Z } from "solid-js/web";
+import { mergeProps as tt, splitProps as et, createSignal as v, onMount as O, createEffect as T, on as rt, onCleanup as lt, Show as M, createMemo as ot, children as st, createComputed as nt } from "solid-js";
+import at from "clsx";
+import { debounce as it } from "../../../utils/debounce.js";
+import { animate as ct } from "../../../utils/animate.js";
+import { TabsContext as dt } from "./tabsContext.js";
+import { mergeRefs as ft } from "../../../primitives/mergeRefs.js";
+import { Icon as W } from "../../base/icon/icon.js";
+var bt = /* @__PURE__ */ _('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), ut = /* @__PURE__ */ _("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), vt = /* @__PURE__ */ _('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), mt = /* @__PURE__ */ _("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
+const V = 40, ht = 0.8;
+function wt(m) {
+  const h = st(() => m.children);
+  return U || nt(() => m.onItems(h.toArray().filter((s) => s instanceof Element))), Y(h);
+}
+function yt(m) {
+  const h = tt({
     indicatorContent: !1,
     scrollable: !1,
     scrollButtons: !1,
     dense: !1,
     scrollBackAriaLabel: "Scroll tabs back",
     scrollForwardAriaLabel: "Scroll tabs forward"
-  }, I), [s, F] = Y(V, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, D] = m(!1), [d, E] = m({
+  }, m), [s, F] = et(h, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, q] = v(!1), [f, y] = v({
     root: {}
-  }), [g, M] = m(!1), [_, B] = m(!1);
-  let l, f, G = 0;
-  const y = [], $ = () => {
+  }), [L, B] = v(!1), [C, A] = v(!1);
+  let l, b;
+  const [$, D] = v();
+  let G = 0;
+  const I = () => {
     let t;
     if (l) {
       const i = l.getBoundingClientRect();
@@ -32,21 +38,21 @@ function _t(I) {
       };
     }
     let r = null, a = null;
-    if (l && f && f.children.length > 0) {
-      const i = f.children[s.value];
-      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = y[s.value]?.getBoundingClientRect() ?? null);
+    if (l && b && b.children.length > 0) {
+      const i = b.children[s.value];
+      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = i?.querySelector(".smwb-tab__content")?.getBoundingClientRect() ?? null);
     }
     return {
       tabsMeta: t,
       tabMeta: r,
       tabContentMeta: a
     };
-  }, A = () => {
+  }, x = () => {
     const {
       tabsMeta: t,
       tabMeta: r,
       tabContentMeta: a
-    } = $();
+    } = I();
     let i = 0;
     r && t && (i = r.left - t.left + t.scrollLeft);
     const e = {
@@ -58,123 +64,132 @@ function _t(I) {
     s.indicatorContent && a && (e.content = {
       width: a.width
     });
-    const o = d();
+    const o = f();
     if (o.root.left === void 0 || o.root.width === void 0) {
-      E(e);
+      y(e);
       return;
     }
     const n = Math.abs((o.root.left ?? 0) - (e.root.left ?? 0)), c = Math.abs((o.root.width ?? 0) - (e.root.width ?? 0));
-    (n >= 1 || c >= 1) && E(e);
-  }, v = () => {
+    (n >= 1 || c >= 1) && y(e);
+  }, w = () => {
     if (!l || !s.scrollable) {
-      M(!1), B(!1);
+      B(!1), A(!1);
       return;
     }
     const t = l.scrollWidth - l.clientWidth;
-    M(l.scrollLeft > 1), B(l.scrollLeft < t - 1);
-  }, C = (t) => {
-    l && lt(l, "scrollLeft", t, {
+    B(l.scrollLeft > 1), A(l.scrollLeft < t - 1);
+  }, p = (t) => {
+    l && ct(l, "scrollLeft", t, {
       duration: 300
     });
-  }, R = (t) => {
-    l && C(l.scrollLeft + t * l.clientWidth * dt);
+  }, z = (t) => {
+    l && p(l.scrollLeft + t * l.clientWidth * ht);
   }, N = () => {
     const {
       tabsMeta: t,
       tabMeta: r
-    } = $();
-    !r || !t || (r.left < t.left ? C(t.scrollLeft + (r.left - t.left) - W) : r.right > t.right && C(t.scrollLeft + (r.right - t.right) + W));
+    } = I();
+    !r || !t || (r.left < t.left ? p(t.scrollLeft + (r.left - t.left) - V) : r.right > t.right && p(t.scrollLeft + (r.right - t.right) + V));
   };
-  k(() => D(!0)), O(Z(() => s.value, () => A())), k(() => {
-    const t = rt(() => {
-      A(), v();
+  O(() => q(!0)), T(rt([() => s.value, $], () => x())), O(() => {
+    const t = it(() => {
+      x(), w();
     }, 166), r = l?.ownerDocument.defaultView;
-    r?.addEventListener("resize", t), l?.addEventListener("scroll", v, {
+    r?.addEventListener("resize", t), l?.addEventListener("scroll", w, {
       passive: !0
     });
     let a;
-    typeof ResizeObserver < "u" && f && (a = new ResizeObserver(t), l && a.observe(l), Array.from(f.children).forEach((i) => a?.observe(i))), v(), tt(() => {
-      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", v), a?.disconnect();
+    typeof ResizeObserver < "u" && b && (a = new ResizeObserver(t), l && a.observe(l), Array.from(b.children).forEach((i) => a?.observe(i))), w(), lt(() => {
+      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", w), a?.disconnect();
     });
-  }), O(() => {
-    d(), N();
+  }), T(() => {
+    f(), N();
   });
   const j = {
     value: () => s.value,
     onChange: s.onChange,
-    indicatorContent: s.indicatorContent,
-    registerTab: () => G++,
-    setContentRef: (t, r) => {
-      y[t] = r;
+    registerTab: (t) => {
+      const r = G++;
+      return ot(() => {
+        const a = $();
+        if (!a) return r;
+        const i = t();
+        return i ? a.findIndex((e) => e.contains(i)) : -1;
+      });
     }
-  }, z = () => s.scrollable && s.scrollButtons && (g() || _());
-  return b(ot.Provider, {
+  }, P = () => s.scrollable && s.scrollButtons && (L() || C());
+  return d(dt.Provider, {
     value: j,
     get children() {
-      var t = ct(), r = t.firstChild, a = r.firstChild, i = st(s.ref);
-      return typeof i == "function" && L(i, t), H(t, J(F, {
+      var t = mt(), r = t.firstChild, a = r.firstChild, i = ft(s.ref);
+      return typeof i == "function" && S(i, t), J(t, K(F, {
         get class() {
-          return et("smwb-tabs", {
+          return at("smwb-tabs", {
             "smwb-tabs--dense": s.dense,
-            "smwb-tabs--overflow-start": g(),
-            "smwb-tabs--overflow-end": _()
+            "smwb-tabs--overflow-start": L(),
+            "smwb-tabs--overflow-end": C()
           }, s.class);
         },
         role: "tabpanel"
-      }), !1, !0), u(t, b(S, {
+      }), !1, !0), u(t, d(M, {
         get when() {
-          return z();
+          return P();
         },
         get children() {
-          var e = nt();
-          return e.$$click = () => R(-1), u(e, b(T, {
+          var e = bt();
+          return e.$$click = () => z(-1), u(e, d(W, {
             name: "chevron_left",
             size: 20
-          })), h((o) => {
-            var n = s.scrollBackAriaLabel, c = !g();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          })), g((o) => {
+            var n = s.scrollBackAriaLabel, c = !L();
+            return n !== o.e && E(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
           }, {
             e: void 0,
             t: void 0
           }), e;
         }
-      }), r), L((e) => l = e, r), L((e) => f = e, a), u(a, () => s.children), u(r, b(S, {
+      }), r), S((e) => l = e, r), S((e) => b = e, a), u(a, d(wt, {
+        onItems: D,
+        get children() {
+          return s.children;
+        }
+      })), u(r, d(M, {
         get when() {
           return X();
         },
         get children() {
-          var e = at(), o = e.firstChild;
-          return h((n) => {
-            var c = `${d().root.left ?? 0}px`, P = `${d().root.width ?? 0}px`, q = d().content ? {
-              width: `${d().content?.width ?? 0}px`
+          var e = ut(), o = e.firstChild;
+          return g((n) => {
+            var c = `${f().root.left ?? 0}px`, R = `${f().root.width ?? 0}px`, H = f().content ? {
+              width: `${f().content?.width ?? 0}px`
             } : {};
-            return c !== n.e && x(e, "left", n.e = c), P !== n.t && x(e, "width", n.t = P), n.a = K(o, q, n.a), n;
+            return c !== n.e && k(e, "left", n.e = c), R !== n.t && k(e, "width", n.t = R), n.a = Q(o, H, n.a), n;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           }), e;
         }
-      }), null), u(t, b(S, {
+      }), null), u(t, d(M, {
         get when() {
-          return z();
+          return P();
         },
         get children() {
-          var e = it();
-          return e.$$click = () => R(1), u(e, b(T, {
+          var e = vt();
+          return e.$$click = () => z(1), u(e, d(W, {
             name: "chevron_right",
             size: 20
-          })), h((o) => {
-            var n = s.scrollForwardAriaLabel, c = !_();
-            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          })), g((o) => {
+            var n = s.scrollForwardAriaLabel, c = !C();
+            return n !== o.e && E(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
           }, {
             e: void 0,
             t: void 0
           }), e;
         }
-      }), null), h((e) => {
+      }), null), g((e) => {
         var o = !!s.scrollable, n = s["aria-label"];
-        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && p(a, "aria-label", e.t = n), e;
+        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && E(a, "aria-label", e.t = n), e;
       }, {
         e: void 0,
         t: void 0
@@ -182,8 +197,8 @@ function _t(I) {
     }
   });
 }
-Q(["click"]);
+Z(["click"]);
 export {
-  _t as Tabs
+  yt as Tabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/headless/components/navigation/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      indicatorContent: false,\n      scrollable: false,\n      scrollButtons: false,\n      dense: false,\n      scrollBackAriaLabel: \"Scroll tabs back\",\n      scrollForwardAriaLabel: \"Scroll tabs forward\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"scrollButtons\",\n    \"dense\",\n    \"scrollBackAriaLabel\",\n    \"scrollForwardAriaLabel\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflowStart, setOverflowStart] = createSignal(false);\n  const [overflowEnd, setOverflowEnd] = createSignal(false);\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const updateOverflow = (): void => {\n    if (!tabsEl || !local.scrollable) {\n      setOverflowStart(false);\n      setOverflowEnd(false);\n      return;\n    }\n    const max = tabsEl.scrollWidth - tabsEl.clientWidth;\n    setOverflowStart(tabsEl.scrollLeft > 1);\n    setOverflowEnd(tabsEl.scrollLeft < max - 1);\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollByPage = (direction: -1 | 1): void => {\n    if (!tabsEl) return;\n    scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator and the overflow state in sync with resizes: of the\n  // window, of the row, and of each tab (a label can grow with its data).\n  onMount(() => {\n    const onResize = debounce(() => {\n      updateIndicatorState();\n      updateOverflow();\n    }, 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    tabsEl?.addEventListener(\"scroll\", updateOverflow, { passive: true });\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      if (tabsEl) resizeObserver.observe(tabsEl);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    updateOverflow();\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      tabsEl?.removeEventListener(\"scroll\", updateOverflow);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  const showScrollButtons = (): boolean => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        class={cn(\n          \"smwb-tabs\",\n          {\n            \"smwb-tabs--dense\": local.dense,\n            \"smwb-tabs--overflow-start\": overflowStart(),\n            \"smwb-tabs--overflow-end\": overflowEnd(),\n          },\n          local.class\n        )}\n        role=\"tabpanel\"\n        ref={mergeRefs(local.ref)}\n      >\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n            aria-label={local.scrollBackAriaLabel}\n            disabled={!overflowStart()}\n            onClick={() => scrollByPage(-1)}\n          >\n            <Icon name=\"chevron_left\" size={20} />\n          </button>\n        </Show>\n        {/* The scroller's class is static so it is on the element from the start:\n            a ref on Tabs can find the row by class right away. */}\n        <div\n          class=\"smwb-tabs__scroller\"\n          classList={{ \"smwb-tabs__scroller--scrollable\": local.scrollable }}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n            aria-label={local.scrollForwardAriaLabel}\n            disabled={!overflowEnd()}\n            onClick={() => scrollByPage(1)}\n          >\n            <Icon name=\"chevron_right\" size={20} />\n          </button>\n        </Show>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","SCROLL_PAGE","Tabs","props","merged","mergeProps","indicatorContent","scrollable","scrollButtons","dense","scrollBackAriaLabel","scrollForwardAriaLabel","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","overflowStart","setOverflowStart","overflowEnd","setOverflowEnd","tabsEl","tabListEl","tabCounter","contentRefs","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","children","length","tab","value","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","updateOverflow","max","scrollWidth","scroll","scrollValue","animate","duration","scrollByPage","direction","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","passive","resizeObserver","ResizeObserver","observe","Array","from","forEach","child","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","setContentRef","index","el","showScrollButtons","_$createComponent","TabsContext","Provider","_el$","_tmpl$4","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$2","_tmpl$","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","disabled","_el$5","_tmpl$2","_el$6","_v$3","_v$4","_v$5","_$setStyleProperty","a","_$style","_el$7","_tmpl$3","_v$6","_v$7","_v$8","_v$9","classList","toggle","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children,\n  createComputed,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  on,\n  onCleanup,\n  onMount,\n  splitProps,\n} from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  /**\n   * Index of the selected tab: its position in the row. Tabs count in the order they\n   * render, so a tab behind a `<Show>` that is off takes no index, and tabs added,\n   * removed or reordered count by their new place.\n   */\n  value: number;\n  /** Called with the index of the clicked tab, counted as for `value`. */\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\n/**\n * The tab list's children, resolved once, with their elements reported in order\n * whenever they change. It renders inside the context provider, so the tabs it\n * creates find their Tabs.\n */\nfunction TabListItems(props: { children?: JSX.Element; onItems: (items: Element[]) => void }): JSX.Element {\n  const resolved = children(() => props.children);\n  if (!isServer) {\n    createComputed(() => props.onItems(resolved.toArray().filter((node) => node instanceof Element)));\n  }\n  return <>{resolved()}</>;\n}\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      indicatorContent: false,\n      scrollable: false,\n      scrollButtons: false,\n      dense: false,\n      scrollBackAriaLabel: \"Scroll tabs back\",\n      scrollForwardAriaLabel: \"Scroll tabs forward\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"scrollButtons\",\n    \"dense\",\n    \"scrollBackAriaLabel\",\n    \"scrollForwardAriaLabel\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflowStart, setOverflowStart] = createSignal(false);\n  const [overflowEnd, setOverflowEnd] = createSignal(false);\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  // The tab list's elements in order, known once its children have resolved in\n  // the browser. Before that, and on the server, a tab's index is the order it\n  // was created in, which is its order in the markup.\n  const [items, setItems] = createSignal<Element[]>();\n  let created = 0;\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = tab?.querySelector(\".smwb-tab__content\")?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const updateOverflow = (): void => {\n    if (!tabsEl || !local.scrollable) {\n      setOverflowStart(false);\n      setOverflowEnd(false);\n      return;\n    }\n    const max = tabsEl.scrollWidth - tabsEl.clientWidth;\n    setOverflowStart(tabsEl.scrollLeft > 1);\n    setOverflowEnd(tabsEl.scrollLeft < max - 1);\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollByPage = (direction: -1 | 1): void => {\n    if (!tabsEl) return;\n    scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value or the tabs change (and on mount).\n  createEffect(on([() => local.value, items], () => updateIndicatorState()));\n\n  // Keep the indicator and the overflow state in sync with resizes: of the\n  // window, of the row, and of each tab (a label can grow with its data).\n  onMount(() => {\n    const onResize = debounce(() => {\n      updateIndicatorState();\n      updateOverflow();\n    }, 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    tabsEl?.addEventListener(\"scroll\", updateOverflow, { passive: true });\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      if (tabsEl) resizeObserver.observe(tabsEl);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    updateOverflow();\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      tabsEl?.removeEventListener(\"scroll\", updateOverflow);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    registerTab: (element) => {\n      const order = created++;\n      return createMemo(() => {\n        const list = items();\n        if (!list) return order;\n        const el = element();\n        return el ? list.findIndex((item) => item.contains(el)) : -1;\n      });\n    },\n  };\n\n  const showScrollButtons = (): boolean => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        class={cn(\n          \"smwb-tabs\",\n          {\n            \"smwb-tabs--dense\": local.dense,\n            \"smwb-tabs--overflow-start\": overflowStart(),\n            \"smwb-tabs--overflow-end\": overflowEnd(),\n          },\n          local.class\n        )}\n        role=\"tabpanel\"\n        ref={mergeRefs(local.ref)}\n      >\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n            aria-label={local.scrollBackAriaLabel}\n            disabled={!overflowStart()}\n            onClick={() => scrollByPage(-1)}\n          >\n            <Icon name=\"chevron_left\" size={20} />\n          </button>\n        </Show>\n        {/* The scroller's class is static so it is on the element from the start:\n            a ref on Tabs can find the row by class right away. */}\n        <div\n          class=\"smwb-tabs__scroller\"\n          classList={{ \"smwb-tabs__scroller--scrollable\": local.scrollable }}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            <TabListItems onItems={setItems}>{local.children}</TabListItems>\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n            aria-label={local.scrollForwardAriaLabel}\n            disabled={!overflowEnd()}\n            onClick={() => scrollByPage(1)}\n          >\n            <Icon name=\"chevron_right\" size={20} />\n          </button>\n        </Show>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","SCROLL_PAGE","TabListItems","props","resolved","children","isServer","createComputed","onItems","toArray","filter","node","Element","_$memo","Tabs","merged","mergeProps","indicatorContent","scrollable","scrollButtons","dense","scrollBackAriaLabel","scrollForwardAriaLabel","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","overflowStart","setOverflowStart","overflowEnd","setOverflowEnd","tabsEl","tabListEl","items","setItems","created","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","length","tab","value","querySelector","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","updateOverflow","max","scrollWidth","scroll","scrollValue","animate","duration","scrollByPage","direction","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","passive","resizeObserver","ResizeObserver","observe","Array","from","forEach","child","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","element","order","createMemo","list","el","findIndex","item","contains","showScrollButtons","_$createComponent","TabsContext","Provider","_el$","_tmpl$4","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$2","_tmpl$","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","disabled","_el$5","_tmpl$2","_el$6","_v$3","_v$4","_v$5","_$setStyleProperty","a","_$style","_el$7","_tmpl$3","_v$6","_v$7","_v$8","_v$9","classList","toggle","_$delegateEvents"],"mappings":";;;;;;;;;AA2DA,MAAMA,IAAmB,IAEnBC,KAAc;AAOpB,SAASC,GAAaC,GAAqF;AACzG,QAAMC,IAAWC,GAAS,MAAMF,EAAME,QAAQ;AAC9C,SAAKC,KACHC,GAAe,MAAMJ,EAAMK,QAAQJ,EAASK,QAAAA,EAAUC,OAAQC,CAAAA,MAASA,aAAgBC,OAAO,CAAC,CAAC,GAElGC,EAAUT,CAAQ;AACpB;AAEO,SAASU,GAAKX,GAA4C;AAC/D,QAAMY,IAASC,GACb;AAAA,IACEC,kBAAkB;AAAA,IAClBC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,OAAO;AAAA,IACPC,qBAAqB;AAAA,IACrBC,wBAAwB;AAAA,EAAA,GAE1BnB,CACF,GACM,CAACoB,GAAOC,CAAI,IAAIC,GAAWV,GAAQ,CACvC,SACA,YACA,YACA,SACA,oBACA,cACA,iBACA,SACA,uBACA,0BACA,cACA,KAAK,CACN,GAEK,CAACW,GAASC,CAAU,IAAIC,EAAa,EAAK,GAC1C,CAACC,GAAgBC,CAAiB,IAAIF,EAA6B;AAAA,IAAEG,MAAM,CAAA;AAAA,EAAC,CAAG,GAG/E,CAACC,GAAeC,CAAgB,IAAIL,EAAa,EAAK,GACtD,CAACM,GAAaC,CAAc,IAAIP,EAAa,EAAK;AAExD,MAAIQ,GACAC;AAIJ,QAAM,CAACC,GAAOC,CAAQ,IAAIX,EAAAA;AAC1B,MAAIY,IAAU;AAEd,QAAMC,IAAcA,MAAM;AACxB,QAAIC;AACJ,QAAIN,GAAQ;AACV,YAAMO,IAAOP,EAAOQ,sBAAAA;AACpBF,MAAAA,IAAW;AAAA,QAAEG,aAAaT,EAAOS;AAAAA,QAAaC,YAAYV,EAAOU;AAAAA,QAAYC,MAAMJ,EAAKI;AAAAA,QAAMC,OAAOL,EAAKK;AAAAA,MAAAA;AAAAA,IAC5G;AACA,QAAIC,IAA0B,MAC1BC,IAAiC;AACrC,QAAId,KAAUC,KAAaA,EAAUhC,SAAS8C,SAAS,GAAG;AACxD,YAAMC,IAAMf,EAAUhC,SAASkB,EAAM8B,KAAK;AAC1CJ,MAAAA,IAAUG,IAAMA,EAAIR,sBAAAA,IAA0B,MAC1CrB,EAAMN,qBACRiC,IAAiBE,GAAKE,cAAc,oBAAoB,GAAGV,2BAA2B;AAAA,IAE1F;AACA,WAAO;AAAA,MAAEF,UAAAA;AAAAA,MAAUO,SAAAA;AAAAA,MAASC,gBAAAA;AAAAA,IAAAA;AAAAA,EAC9B,GAEMK,IAAuBA,MAAY;AACvC,UAAM;AAAA,MAAEb,UAAAA;AAAAA,MAAUO,SAAAA;AAAAA,MAASC,gBAAAA;AAAAA,IAAAA,IAAmBT,EAAAA;AAC9C,QAAIe,IAAa;AACjB,IAAIP,KAAWP,MACbc,IAAaP,EAAQF,OAAOL,EAASK,OAAOL,EAASI;AAEvD,UAAMW,IAAuB;AAAA,MAAE1B,MAAM;AAAA,QAAEgB,MAAMS;AAAAA,QAAYE,OAAOT,IAAUA,EAAQS,QAAQ;AAAA,MAAA;AAAA,IAAE;AAC5F,IAAInC,EAAMN,oBAAoBiC,MAC5BO,EAAKE,UAAU;AAAA,MAAED,OAAOR,EAAeQ;AAAAA,IAAAA;AAEzC,UAAME,IAAO/B,EAAAA;AACb,QAAI+B,EAAK7B,KAAKgB,SAASc,UAAaD,EAAK7B,KAAK2B,UAAUG,QAAW;AACjE/B,MAAAA,EAAkB2B,CAAI;AACtB;AAAA,IACF;AACA,UAAMK,IAASC,KAAKC,KAAKJ,EAAK7B,KAAKgB,QAAQ,MAAMU,EAAK1B,KAAKgB,QAAQ,EAAE,GAC/DkB,IAAQF,KAAKC,KAAKJ,EAAK7B,KAAK2B,SAAS,MAAMD,EAAK1B,KAAK2B,SAAS,EAAE;AACtE,KAAII,KAAU,KAAKG,KAAS,MAC1BnC,EAAkB2B,CAAI;AAAA,EAE1B,GAEMS,IAAiBA,MAAY;AACjC,QAAI,CAAC9B,KAAU,CAACb,EAAML,YAAY;AAChCe,MAAAA,EAAiB,EAAK,GACtBE,EAAe,EAAK;AACpB;AAAA,IACF;AACA,UAAMgC,IAAM/B,EAAOgC,cAAchC,EAAOS;AACxCZ,IAAAA,EAAiBG,EAAOU,aAAa,CAAC,GACtCX,EAAeC,EAAOU,aAAaqB,IAAM,CAAC;AAAA,EAC5C,GAEME,IAASA,CAACC,MAA8B;AAC5C,IAAKlC,KACLmC,GAAQnC,GAAQ,cAAckC,GAAa;AAAA,MAAEE,UAAU;AAAA,IAAA,CAAK;AAAA,EAC9D,GAEMC,IAAeA,CAACC,MAA4B;AAChD,IAAKtC,KACLiC,EAAOjC,EAAOU,aAAa4B,IAAYtC,EAAOS,cAAc5C,EAAW;AAAA,EACzE,GAEM0E,IAAyBA,MAAY;AACzC,UAAM;AAAA,MAAEjC,UAAAA;AAAAA,MAAUO,SAAAA;AAAAA,IAAAA,IAAYR,EAAAA;AAC9B,IAAI,CAACQ,KAAW,CAACP,MACbO,EAAQF,OAAOL,EAASK,OAC1BsB,EAAO3B,EAASI,cAAcG,EAAQF,OAAOL,EAASK,QAAQ/C,CAAgB,IACrEiD,EAAQD,QAAQN,EAASM,SAClCqB,EAAO3B,EAASI,cAAcG,EAAQD,QAAQN,EAASM,SAAShD,CAAgB;AAAA,EAEpF;AAEA4E,EAAAA,EAAQ,MAAMjD,EAAW,EAAI,CAAC,GAG9BkD,EAAaC,GAAG,CAAC,MAAMvD,EAAM8B,OAAOf,CAAK,GAAG,MAAMiB,EAAAA,CAAsB,CAAC,GAIzEqB,EAAQ,MAAM;AACZ,UAAMG,IAAWC,GAAS,MAAM;AAC9BzB,MAAAA,EAAAA,GACAW,EAAAA;AAAAA,IACF,GAAG,GAAG,GACAe,IAAO7C,GAAQ8C,cAAcC;AACnCF,IAAAA,GAAMG,iBAAiB,UAAUL,CAAQ,GACzC3C,GAAQgD,iBAAiB,UAAUlB,GAAgB;AAAA,MAAEmB,SAAS;AAAA,IAAA,CAAM;AACpE,QAAIC;AACJ,IAAI,OAAOC,iBAAmB,OAAelD,MAC3CiD,IAAiB,IAAIC,eAAeR,CAAQ,GACxC3C,KAAQkD,EAAeE,QAAQpD,CAAM,GACzCqD,MAAMC,KAAKrD,EAAUhC,QAAQ,EAAEsF,QAASC,CAAAA,MAAUN,GAAgBE,QAAQI,CAAK,CAAC,IAElF1B,EAAAA,GACA2B,GAAU,MAAM;AACdd,MAAAA,EAASe,OAAAA,GACTb,GAAMc,oBAAoB,UAAUhB,CAAQ,GAC5C3C,GAAQ2D,oBAAoB,UAAU7B,CAAc,GACpDoB,GAAgBU,WAAAA;AAAAA,IAClB,CAAC;AAAA,EACH,CAAC,GAGDnB,EAAa,MAAM;AACjBhD,IAAAA,EAAAA,GACA8C,EAAAA;AAAAA,EACF,CAAC;AAED,QAAMsB,IAAiC;AAAA,IACrC5C,OAAOA,MAAM9B,EAAM8B;AAAAA,IACnB6C,UAAU3E,EAAM2E;AAAAA,IAChBC,aAAcC,CAAAA,MAAY;AACxB,YAAMC,IAAQ7D;AACd,aAAO8D,GAAW,MAAM;AACtB,cAAMC,IAAOjE,EAAAA;AACb,YAAI,CAACiE,EAAM,QAAOF;AAClB,cAAMG,IAAKJ,EAAAA;AACX,eAAOI,IAAKD,EAAKE,UAAWC,CAAAA,MAASA,EAAKC,SAASH,CAAE,CAAC,IAAI;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,EAAA,GAGII,IAAoBA,MAAerF,EAAML,cAAcK,EAAMJ,kBAAkBa,OAAmBE;AAExG,SAAA2E,EACGC,GAAYC,UAAQ;AAAA,IAAC1D,OAAO4C;AAAAA,IAAY,IAAA5F,WAAA;AAAA,UAAA2G,IAAAC,GAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAahCC,GAAU/F,EAAMgG,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EAXrBlG,GAAI;AAAA,QAAA,IAAA,QAAA;AAAA,iBACDmG,GACL,aACA;AAAA,YACE,oBAAoBpG,EAAMH;AAAAA,YAC1B,6BAA6BY,EAAAA;AAAAA,YAC7B,2BAA2BE,EAAAA;AAAAA,UAAY,GAEzCX,EAAMqG,KACR;AAAA,QAAC;AAAA,QAAA,MACI;AAAA,MAAA,CAAU,GAAA,IAAA,EAAA,GAAAC,EAAAb,GAAAH,EAGdiB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEnB,EAAAA;AAAAA,QAAmB;AAAA,QAAA,IAAAvG,WAAA;AAAA,cAAA2H,IAAAC,GAAAA;AAAAD,iBAAAA,EAAAE,UAMlB,MAAMzD,EAAa,EAAE,GAACoD,EAAAG,GAAAnB,EAE9BsB,GAAI;AAAA,YAACC,MAAI;AAAA,YAAgBC,MAAM;AAAA,UAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IAJtBjH,EAAMF,qBAAmBoH,IAC3B,CAACzG,EAAAA;AAAewG,mBAAAA,MAAAD,EAAAG,KAAAC,EAAAX,GAAA,cAAAO,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,MAAAZ,EAAAa,WAAAN,EAAAK,IAAAH,IAAAF;AAAAA,UAAA,GAAA;AAAA,YAAAG,GAAA7E;AAAAA,YAAA+E,GAAA/E;AAAAA,UAAAA,CAAA,GAAAmE;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAd,CAAA,GAAAM,EAWtBhB,CAAAA,MAAQpE,IAASoE,GAAGU,CAAA,GAAAM,EAEgBhB,CAAAA,MAAQnE,IAAYmE,GAAGY,CAAA,GAAAS,EAAAT,GAAAP,EAC9D3G,IAAY;AAAA,QAACM,SAAS+B;AAAAA,QAAQ,IAAAlC,WAAA;AAAA,iBAAGkB,EAAMlB;AAAAA,QAAQ;AAAA,MAAA,CAAA,CAAA,GAAAwH,EAAAX,GAAAL,EAEjDiB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAErG,EAAAA;AAAAA,QAAS;AAAA,QAAA,IAAArB,WAAA;AAAA,cAAAyI,IAAAC,GAAAA,GAAAC,IAAAF,EAAA3B;AAAAmB,iBAAAA,EAAAC,CAAAA,MAAA;AAAA,gBAAAU,IAIT,GAAGpH,EAAAA,EAAiBE,KAAKgB,QAAQ,CAAC,MAAImG,IACrC,GAAGrH,EAAAA,EAAiBE,KAAK2B,SAAS,CAAC,MAAIyF,IAKvCtH,EAAAA,EAAiB8B,UAAU;AAAA,cAAED,OAAO,GAAG7B,EAAAA,EAAiB8B,SAASD,SAAS,CAAC;AAAA,YAAA,IAAS,CAAA;AAAEuF,mBAAAA,MAAAV,EAAAG,KAAAU,EAAAN,GAAA,QAAAP,EAAAG,IAAAO,CAAA,GAAAC,MAAAX,EAAAK,KAAAQ,EAAAN,GAAA,SAAAP,EAAAK,IAAAM,CAAA,GAAAX,EAAAc,IAAAC,EAAAN,GAAAG,GAAAZ,EAAAc,CAAA,GAAAd;AAAAA,UAAA,GAAA;AAAA,YAAAG,GAAA7E;AAAAA,YAAA+E,GAAA/E;AAAAA,YAAAwF,GAAAxF;AAAAA,UAAAA,CAAA,GAAAiF;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAjB,EAAAb,GAAAH,EAKpGiB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEnB,EAAAA;AAAAA,QAAmB;AAAA,QAAA,IAAAvG,WAAA;AAAA,cAAAkJ,IAAAC,GAAAA;AAAAD,iBAAAA,EAAArB,UAMlB,MAAMzD,EAAa,CAAC,GAACoD,EAAA0B,GAAA1C,EAE7BsB,GAAI;AAAA,YAACC,MAAI;AAAA,YAAiBC,MAAM;AAAA,UAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,gBAAAkB,IAJvBlI,EAAMD,wBAAsBoI,IAC9B,CAACxH,EAAAA;AAAauH,mBAAAA,MAAAlB,EAAAG,KAAAC,EAAAY,GAAA,cAAAhB,EAAAG,IAAAe,CAAA,GAAAC,MAAAnB,EAAAK,MAAAW,EAAAV,WAAAN,EAAAK,IAAAc,IAAAnB;AAAAA,UAAA,GAAA;AAAA,YAAAG,GAAA7E;AAAAA,YAAA+E,GAAA/E;AAAAA,UAAAA,CAAA,GAAA0F;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAjB,EAAAC,CAAAA,MAAA;AAAA,YAAAoB,IAAA,CAAA,CA1BsBpI,EAAML,YAAU0I,IAG8BrI,EAAM,YAAY;AAACoI,eAAAA,MAAApB,EAAAG,KAAAxB,EAAA2C,UAAAC,OAAA,mCAAAvB,EAAAG,IAAAiB,CAAA,GAAAC,MAAArB,EAAAK,KAAAD,EAAAvB,GAAA,cAAAmB,EAAAK,IAAAgB,CAAA,GAAArB;AAAAA,MAAA,GAAA;AAAA,QAAAG,GAAA7E;AAAAA,QAAA+E,GAAA/E;AAAAA,MAAAA,CAAA,GAAAmD;AAAAA,IAAA;AAAA,EAAA,CAAA;AAgC3H;AAIoB+C,EAAA,CAAA,OAAA,CAAA;"}

package/dist/headless/components/navigation/tabs/tabsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsContext.js","sources":["../../../../../src/components/navigation/tabs/tabsContext.ts"],"sourcesContent":["import { type Accessor, createContext, useContext } from \"solid-js\";\n\nexport interface TabsContextValue {\n  value: Accessor<number>;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent: boolean;\n  /** Each Tab registers on setup to learn its index (in DOM order). */\n  registerTab: () => number;\n  setContentRef: (index: number, el: HTMLSpanElement) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue>();\n\nexport const useTabsContext = (): TabsContextValue | undefined => useContext(TabsContext);\n"],"names":["TabsContext","createContext","useTabsContext","useContext"],"mappings":";AAWO,MAAMA,IAAcC,EAAA,GAEdC,IAAiB,MAAoCC,EAAWH,CAAW;"}
+{"version":3,"file":"tabsContext.js","sources":["../../../../../src/components/navigation/tabs/tabsContext.ts"],"sourcesContent":["import { type Accessor, createContext, useContext } from \"solid-js\";\n\nexport interface TabsContextValue {\n  value: Accessor<number>;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  /**\n   * Each Tab registers on setup with its root element (set once it renders) and\n   * gets back its index: its position in the tab list, which follows the tab when\n   * tabs are added, removed or reordered.\n   */\n  registerTab: (element: Accessor<Element | undefined>) => Accessor<number>;\n}\n\nexport const TabsContext = createContext<TabsContextValue>();\n\nexport const useTabsContext = (): TabsContextValue | undefined => useContext(TabsContext);\n"],"names":["TabsContext","createContext","useTabsContext","useContext"],"mappings":";AAaO,MAAMA,IAAcC,EAAA,GAEdC,IAAiB,MAAoCC,EAAWH,CAAW;"}