@smwb/ui-solid 2.0.0 → 2.1.0

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

@@ -1,15 +1,15 @@
-import { createComponent as i, insert as n, effect as A, setAttribute as P, className as z, template as c, Dynamic as H, mergeProps as U, use as R, memo as k, delegateEvents as J } from "solid-js/web";
-import { createSignal as Q, mergeProps as V, splitProps as X, children as _, Show as u } from "solid-js";
-import T from "clsx";
-import { useTabsContext as Y } from "../tabsContext.js";
+import { createComponent as i, insert as n, effect as v, setAttribute as _, className as H, template as c, Dynamic as U, mergeProps as J, use as P, memo as D, delegateEvents as Q } from "solid-js/web";
+import { createSignal as V, mergeProps as X, splitProps as Y, children as C, Show as u } from "solid-js";
+import R from "clsx";
+import { useTabsContext as Z } from "../tabsContext.js";
 import { mergeRefs as B } from "../../../../primitives/mergeRefs.js";
 import { callHandler as p } from "../../../../primitives/callHandler.js";
-import { Icon as Z } from "../../../base/icon/icon.js";
-import { Ripple as ee } from "../../../base/ripple/ripple.js";
-var te = /* @__PURE__ */ c("<span class=smwb-tab__icon aria-hidden=true>"), oe = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), ae = /* @__PURE__ */ c("<span class=smwb-tab__content>"), re = /* @__PURE__ */ c("<span class=smwb-tab__actions>"), le = /* @__PURE__ */ c("<button type=button class=smwb-tab__close tabindex=-1>"), ne = /* @__PURE__ */ c("<div>");
-const ie = (r) => r.button !== 0 || r.ctrlKey || r.metaKey || r.shiftKey || r.altKey, se = (r) => r.ctrlKey || r.metaKey || r.altKey || r.shiftKey, ce = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', de = '[role^="menuitem"]:not([aria-disabled="true"])', be = (r) => {
-  for (const l of r.getAttribute("aria-controls")?.split(/\s+/) ?? []) {
-    const f = l ? r.ownerDocument.getElementById(l)?.querySelector(de) : null;
+import { Icon as ee } from "../../../base/icon/icon.js";
+import { Ripple as te } from "../../../base/ripple/ripple.js";
+var oe = /* @__PURE__ */ c("<span class=smwb-tab__icon aria-hidden=true>"), re = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), ae = /* @__PURE__ */ c("<span class=smwb-tab__content>"), le = /* @__PURE__ */ c("<span class=smwb-tab__actions>"), ne = /* @__PURE__ */ c("<button type=button class=smwb-tab__close tabindex=-1>"), ie = /* @__PURE__ */ c("<div>");
+const se = (a) => a.button !== 0 || a.ctrlKey || a.metaKey || a.shiftKey || a.altKey, ce = (a) => a.ctrlKey || a.metaKey || a.altKey || a.shiftKey, de = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', be = '[role^="menuitem"]:not([aria-disabled="true"])', ue = (a) => {
+  for (const l of a.getAttribute("aria-controls")?.split(/\s+/) ?? []) {
+    const f = l ? a.ownerDocument.getElementById(l)?.querySelector(be) : null;
     if (f) {
       f.focus({
         preventScroll: !0
@@ -18,12 +18,12 @@ const ie = (r) => r.button !== 0 || r.ctrlKey || r.metaKey || r.shiftKey || r.al
     }
   }
 };
-function ke(r) {
-  const l = Y(), [f, I] = Q(), E = V({
+function ve(a) {
+  const l = Z(), [f, I] = V(), E = X({
     isActive: !1,
     stacked: !1,
     closeLabel: "Close tab"
-  }, r), [t, q] = X(E, [
+  }, a), [t, q] = Y(E, [
     "class",
     "label",
     "isActive",
@@ -53,40 +53,43 @@ function ke(r) {
     "onMouseDown"
   ]), s = l ? l.registerTab(f, {
     id: () => t.id,
-    disabled: () => !!t.disabled || r["aria-disabled"] === !0 || r["aria-disabled"] === "true",
+    disabled: () => !!t.disabled || a["aria-disabled"] === !0 || a["aria-disabled"] === "true",
     closable: () => !!t.closable,
     requestClose: (e) => d(e, "key")
-  }) : () => -1, v = _(() => t.icon), D = _(() => t.label), F = {
+  }) : () => -1, S = C(() => t.icon), h = C(() => t.label), F = () => {
+    const e = h();
+    return l?.fit?.() && a.title === void 0 && typeof e == "string" && e !== "" ? e : void 0;
+  }, L = {
     close: (e) => d(e, "actions")
-  }, h = _(() => {
+  }, y = C(() => {
     const e = t.actions;
-    return typeof e == "function" ? e(F) : e;
-  }), y = () => h.toArray().length > 0;
-  let C, w;
-  const m = () => l ? l.value() === s() : t.isActive, g = () => t.tag ?? (t.href !== void 0 ? "a" : "button"), S = () => !!t.disabled && g() !== "button", L = (e) => {
-    if (S()) {
+    return typeof e == "function" ? e(L) : e;
+  }), w = () => y.toArray().length > 0;
+  let $, k;
+  const m = () => l ? l.value() === s() : t.isActive, g = () => t.tag ?? (t.href !== void 0 ? "a" : "button"), x = () => !!t.disabled && g() !== "button", N = (e) => {
+    if (x()) {
       e.preventDefault();
       return;
     }
-    p(t.onClick, e), !(t.href !== void 0 && ie(e)) && l?.onChange(e, s());
+    p(t.onClick, e), !(t.href !== void 0 && se(e)) && l?.onChange(e, s());
   }, d = (e, o) => {
     l?.closing(s(), o), t.onClose?.(e, o);
-  }, N = (e) => {
+  }, G = (e) => {
     if (p(t.onKeyDown, e), !(t.disabled || e.defaultPrevented || e.target !== e.currentTarget)) {
       if (g() !== "button" && e.key === " ")
         e.preventDefault(), e.currentTarget.click();
-      else if (t.closable && (e.key === "Delete" || e.key === "Backspace") && !se(e))
+      else if (t.closable && (e.key === "Delete" || e.key === "Backspace") && !ce(e))
         e.preventDefault(), d(e, "key");
-      else if (y() && (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey)) {
-        const o = w?.querySelector(ce);
-        o && (e.preventDefault(), o.focus(), o.getAttribute("aria-expanded") !== "true" && o.click(), be(o));
+      else if (w() && (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey)) {
+        const o = k?.querySelector(de);
+        o && (e.preventDefault(), o.focus(), o.getAttribute("aria-expanded") !== "true" && o.click(), ue(o));
       }
     }
-  }, G = (e) => {
-    p(t.onPointerDown, e), C?.onRipple(e);
   }, O = (e) => {
+    p(t.onPointerDown, e), $?.onRipple(e);
+  }, W = (e) => {
     p(t.onMouseDown, e), e.button === 1 && t.closable && !t.disabled && (e.preventDefault(), d(e, "middleClick"));
-  }, W = () => l ? l.tabStop(s()) : t.tabStop ?? m(), j = () => [r["aria-keyshortcuts"], !t.disabled && t.closable ? "Delete Backspace" : void 0, !t.disabled && y() ? "Shift+F10 ContextMenu" : void 0, !t.disabled && t.closable ? "Meta+W Control+W" : void 0, t.disabled ? void 0 : "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]"].filter(Boolean).join(" ") || void 0, $ = () => t.closable !== void 0 || h() !== void 0, K = () => l?.reorderable() && !t.disabled && r["aria-disabled"] !== !0 && r["aria-disabled"] !== "true" ? !0 : void 0, M = () => i(H, U({
+  }, j = () => l ? l.tabStop(s()) : t.tabStop ?? m(), z = () => [a["aria-keyshortcuts"], !t.disabled && t.closable ? "Delete Backspace" : void 0, !t.disabled && w() ? "Shift+F10 ContextMenu" : void 0, !t.disabled && t.closable ? "Meta+W Control+W" : void 0, t.disabled ? void 0 : "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]"].filter(Boolean).join(" ") || void 0, K = () => t.closable !== void 0 || y() !== void 0, M = () => l?.reorderable() && !t.disabled && a["aria-disabled"] !== !0 && a["aria-disabled"] !== "true" ? !0 : void 0, A = () => i(U, J({
     get component() {
       return g();
     }
@@ -96,7 +99,7 @@ function ke(r) {
       typeof o == "function" && o(e);
     },
     get class() {
-      return T("smwb-tab", t.class, {
+      return R("smwb-tab", t.class, {
         "smwb-tab--active": m(),
         "smwb-tab--stacked": t.stacked,
         "smwb-tab--disabled": t.disabled
@@ -109,15 +112,15 @@ function ke(r) {
       return t["aria-controls"] ?? (l?.hasPanels() ? l.panelId(s()) : void 0);
     },
     get href() {
-      return k(() => !!S())() ? void 0 : t.href;
+      return D(() => !!x())() ? void 0 : t.href;
     },
     get draggable() {
-      return k(() => !!$())() ? void 0 : K();
+      return D(() => !!K())() ? void 0 : M();
     },
-    onClick: L,
-    onKeyDown: N,
-    onPointerDown: G,
-    onMouseDown: O,
+    onClick: N,
+    onKeyDown: G,
+    onPointerDown: O,
+    onMouseDown: W,
     role: "tab",
     get "aria-selected"() {
       return m();
@@ -126,36 +129,36 @@ function ke(r) {
       return t.disabled || void 0;
     },
     get "aria-keyshortcuts"() {
-      return j();
+      return z();
     },
     get tabindex() {
-      return W() ? 0 : -1;
+      return j() ? 0 : -1;
     },
     get disabled() {
-      return k(() => g() === "button")() ? t.disabled : void 0;
+      return D(() => g() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
         var e = ae(), o = B(t.contentRef);
-        return typeof o == "function" && R(o, e), n(e, i(u, {
+        return typeof o == "function" && P(o, e), n(e, i(u, {
           get when() {
-            return v();
+            return S();
           },
           get children() {
-            var a = te();
-            return n(a, v), a;
+            var r = oe();
+            return n(r, S), r;
           }
         }), null), n(e, i(u, {
           get when() {
-            return D();
+            return h();
           },
           get children() {
-            var a = oe();
-            return n(a, D), a;
+            var r = re();
+            return n(r, h), v(() => _(r, "title", F())), r;
           }
         }), null), e;
-      })(), i(ee, {
-        actionRef: (e) => C = e,
+      })(), i(te, {
+        actionRef: (e) => $ = e,
         classes: {
           child: "tab__ripple-child"
         }
@@ -164,44 +167,44 @@ function ke(r) {
   }));
   return i(u, {
     get when() {
-      return $();
+      return K();
     },
     get fallback() {
-      return M();
+      return A();
     },
     get children() {
-      var e = ne();
-      return n(e, M, null), n(e, i(u, {
+      var e = ie();
+      return n(e, A, null), n(e, i(u, {
         get when() {
-          return y();
+          return w();
         },
         get children() {
-          var o = re(), a = w;
-          return typeof a == "function" ? R(a, o) : w = o, n(o, h), o;
+          var o = le(), r = k;
+          return typeof r == "function" ? P(r, o) : k = o, n(o, y), o;
         }
       }), null), n(e, i(u, {
         get when() {
           return t.closable;
         },
         get children() {
-          var o = le();
-          return o.$$click = (a) => d(a, "button"), o.$$mousedown = (a) => a.preventDefault(), n(o, i(Z, {
+          var o = ne();
+          return o.$$click = (r) => d(r, "button"), o.$$mousedown = (r) => r.preventDefault(), n(o, i(ee, {
             name: "close",
             size: 16
-          })), A((a) => {
-            var b = t.closeLabel, x = !!t.disabled;
-            return b !== a.e && P(o, "aria-label", a.e = b), x !== a.t && (o.disabled = a.t = x), a;
+          })), v((r) => {
+            var b = t.closeLabel, T = !!t.disabled;
+            return b !== r.e && _(o, "aria-label", r.e = b), T !== r.t && (o.disabled = r.t = T), r;
           }, {
             e: void 0,
             t: void 0
           }), o;
         }
-      }), null), A((o) => {
-        var a = T("smwb-tab-item", {
+      }), null), v((o) => {
+        var r = R("smwb-tab-item", {
           "smwb-tab-item--active": m(),
           "smwb-tab-item--disabled": t.disabled
-        }), b = K();
-        return a !== o.e && z(e, o.e = a), b !== o.t && P(e, "draggable", o.t = b), o;
+        }), b = M();
+        return r !== o.e && H(e, o.e = r), b !== o.t && _(e, "draggable", o.t = b), o;
       }, {
         e: void 0,
         t: void 0
@@ -209,8 +212,8 @@ function ke(r) {
     }
   });
 }
-J(["mousedown", "click"]);
+Q(["mousedown", "click"]);
 export {
-  ke as Tab
+  ve as Tab
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { Icon } from \"../../../base/icon\";\nimport { useTabsContext, type TabCloseReason } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport type { TabCloseReason };\n\n/** What a function given as `actions` receives. */\nexport interface TabActionsApi {\n  /**\n   * Ask for the tab to close, as its close button does: `onClose` is called with this event and the\n   * reason \"actions\", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus\n   * is in a menu drawn outside the row. Call it from the item that closes the tab (\"Terminate\"), with\n   * that item's event. It works on a tab that is not `closable`.\n   */\n  close: (event: Event) => void;\n}\n\n// `onClose` is the close button's, not the element's `close` event handler.\nexport interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, \"onClose\"> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  /**\n   * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets\n   * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\n   * is the stop while `isActive`.\n   */\n  tabStop?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  /**\n   * A decorative status marker drawn left of the label (a running/done/failed icon). Its\n   * wrapper renders `aria-hidden=\"true\"`, so the tab's accessible name stays the label\n   * alone: the icon is not announced on top of it. To have the status read out, put it\n   * in the `label` itself.\n   */\n  icon?: JSX.Element;\n  stacked?: boolean;\n  /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */\n  tag?: string;\n  /**\n   * Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\n   * no `target`: a tab never opens another window), so it opens in place and middle click, copy\n   * link and the like work. A router takes over the plain click in `onClick` with\n   * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n   * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n   * \"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\n   * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\n   * editor, and its default is prevented so nothing opens.\n   */\n  href?: string;\n  disabled?: boolean;\n  /**\n   * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n   * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A\n   * middle click on the tab closes it as well (`reason` \"middleClick\"): the browser's own\n   * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the\n   * click never selects. The tab does not close itself: `onClose` asks for it and the owner\n   * removes the `Tab`. The button is a sibling of the tab, not inside its `role=\"tab\"`, so the\n   * tab's accessible name is its label alone.\n   * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes\n   * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\n   * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\n   * has a disabled button.\n   *\n   * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\n   * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\n   * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n   * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n   *\n   * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n   * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\n   * recreates the tab and drops its focus.\n   */\n  closable?: boolean;\n  /**\n   * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n   * \"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\n   * prevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\n   * or the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\n   * the `Tab`.\n   */\n  onClose?: (event: Event, reason: TabCloseReason) => void;\n  /** Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\"). */\n  closeLabel?: string;\n  /**\n   * Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\n   * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.\n   * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;\n   * the tab's own `ref`, `class` and handlers stay on the `role=\"tab\"` element. It stays in the\n   * accessibility tree as written, inside the tab list (see `closable`).\n   *\n   * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the\n   * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\n   * and clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\n   * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then\n   * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\n   * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n   *\n   * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with\n   * the `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with\n   * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab\n   * removed some other way leaves focus on the page.\n   */\n  actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\n/** A click that asks the browser for something else than \"go here\": a new tab, a new window, a download. */\nconst isModifiedClick = (event: MouseEvent): boolean =>\n  event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;\n\nconst hasModifier = (event: KeyboardEvent): boolean => event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;\n\n/** What the Menu key and Shift+F10 stand for: the actions' trigger. */\nconst ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role=\"button\"]:not([aria-disabled=\"true\"]), [tabindex]';\n\n/** The item of an opened menu that takes focus first. */\nconst FIRST_MENU_ITEM = '[role^=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n/** Focus the first item of the popup `trigger` names in `aria-controls`, if it is there. */\nconst focusPopupOf = (trigger: HTMLElement): void => {\n  for (const id of trigger.getAttribute(\"aria-controls\")?.split(/\\s+/) ?? []) {\n    const item = id ? trigger.ownerDocument.getElementById(id)?.querySelector<HTMLElement>(FIRST_MENU_ITEM) : null;\n    if (item) {\n      // The menu may not be placed yet: a scroll to it would jump to the corner it starts in.\n      item.focus({ preventScroll: true });\n      return;\n    }\n  }\n};\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: \"Close tab\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"href\",\n    \"tabStop\",\n    \"disabled\",\n    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value\n    // is dropped, as in the React `Tab`.\n    \"draggable\",\n    \"closable\",\n    \"onClose\",\n    \"closeLabel\",\n    \"actions\",\n    \"id\",\n    \"aria-controls\",\n    // A tab opens in place: a caller's target is dropped, not passed on.\n    \"target\" as keyof TabProps,\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"onMouseDown\",\n  ]);\n\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx\n    ? ctx.registerTab(root, {\n        id: () => local.id,\n        disabled: () =>\n          Boolean(local.disabled) || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\",\n        closable: () => Boolean(local.closable),\n        requestClose: (event) => close(event, \"key\"),\n      })\n    : () => -1;\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n  // The actions are drawn whenever they are given, so reading them here, once, is safe. A function\n  // is the tab's to call, with its api: `children` would call it with nothing.\n  const actionsApi: TabActionsApi = { close: (event) => close(event, \"actions\") };\n  const actions = children(() => {\n    const given = local.actions;\n    return typeof given === \"function\" ? (given as (api: TabActionsApi) => JSX.Element)(actionsApi) : given;\n  });\n  const hasActions = (): boolean => actions.toArray().length > 0;\n\n  let rippleActions: RippleActionsRef | undefined;\n  let actionsEl: HTMLSpanElement | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const tag = (): string => local.tag ?? (local.href !== undefined ? \"a\" : \"button\");\n  // Anything but a button is not disabled by the attribute: its clicks are swallowed here.\n  const inert = (): boolean => Boolean(local.disabled) && tag() !== \"button\";\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (inert()) {\n      event.preventDefault();\n      return;\n    }\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    // A link tab opens elsewhere on a modified click: the browser's, not a selection here.\n    if (local.href !== undefined && isModifiedClick(event)) return;\n    ctx?.onChange(event, index());\n  };\n\n  const close = (event: Event, reason: TabCloseReason): void => {\n    // The row notes which tab is closing before the owner removes it.\n    ctx?.closing(index(), reason);\n    local.onClose?.(event, reason);\n  };\n\n  // A button clicks on Enter and Space by itself, a link on Enter only: Space does it here.\n  const onKeyDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (local.disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n    if (tag() !== \"button\" && event.key === \" \") {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (local.closable && (event.key === \"Delete\" || event.key === \"Backspace\") && !hasModifier(event)) {\n      event.preventDefault();\n      close(event, \"key\");\n    } else if (hasActions() && (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey))) {\n      // The Menu key, or Shift+F10: the keyboard's right click. The trigger takes focus first, so\n      // the menu it opens hands focus back to it on Escape.\n      const trigger = actionsEl?.querySelector<HTMLElement>(ACTIONS_TRIGGER);\n      if (trigger) {\n        event.preventDefault();\n        trigger.focus();\n        // The keys mean \"open\": a menu that already is open is not toggled shut.\n        if (trigger.getAttribute(\"aria-expanded\") !== \"true\") {\n          trigger.click();\n        }\n        focusPopupOf(trigger);\n      }\n    }\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  // Middle click on a closable tab closes it, IDE-style: the browser's own middle-click\n  // action (autoscroll, opening a link tab in a new window) is suppressed and the tab is\n  // never selected. A middle click on a tab that is not closable is the browser's, untouched.\n  const onMouseDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseDown, event);\n    if (event.button === 1 && local.closable && !local.disabled) {\n      event.preventDefault();\n      close(event, \"middleClick\");\n    }\n  };\n\n  // Inside Tabs the row decides, whatever the caller passed.\n  const tabStop = (): boolean => (ctx ? ctx.tabStop(index()) : (local.tabStop ?? active()));\n\n  // What the tab answers to, for assistive technology; the caller's own list is kept.\n  // The chords are best-effort: browsers reserve Mod+W and Mod+Shift+[/] in a page of\n  // their own tabs, and they bite only in an embedded webview.\n  const keyshortcuts = (): string | undefined =>\n    [\n      props[\"aria-keyshortcuts\"],\n      !local.disabled && local.closable ? \"Delete Backspace\" : undefined,\n      !local.disabled && hasActions() ? \"Shift+F10 ContextMenu\" : undefined,\n      !local.disabled && local.closable ? \"Meta+W Control+W\" : undefined,\n      !local.disabled ? \"Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  // A tab given neither `closable` nor `actions` is the bare element, as it always was.\n  const wrapped = (): boolean => local.closable !== undefined || actions() !== undefined;\n\n  // Only a reorderable row makes its items draggable, and a disabled tab never — the same\n  // contract as the registration's `disabled`. Rendered on the item (the wrapper, or the\n  // bare tab when there is none), so `draggable` is in the server markup, as in React.\n  const draggable = (): boolean | undefined =>\n    ctx?.reorderable() && !local.disabled && props[\"aria-disabled\"] !== true && props[\"aria-disabled\"] !== \"true\"\n      ? true\n      : undefined;\n\n  const renderTab = (): JSX.Element => (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      id={local.id ?? ctx?.tabId(index())}\n      aria-controls={local[\"aria-controls\"] ?? (ctx?.hasPanels() ? ctx.panelId(index()) : undefined)}\n      // A disabled link has no href, so it is no link to follow or to focus.\n      href={inert() ? undefined : local.href}\n      draggable={wrapped() ? undefined : draggable()}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      onMouseDown={onMouseDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      aria-keyshortcuts={keyshortcuts()}\n      tabindex={tabStop() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\" aria-hidden=\"true\">\n            {icon()}\n          </span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(api) => (rippleActions = api)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n\n  return (\n    <Show when={wrapped()} fallback={renderTab()}>\n      <div\n        class={cn(\"smwb-tab-item\", {\n          \"smwb-tab-item--active\": active(),\n          \"smwb-tab-item--disabled\": local.disabled,\n        })}\n        draggable={draggable()}\n      >\n        {renderTab()}\n        <Show when={hasActions()}>\n          <span class=\"smwb-tab__actions\" ref={actionsEl}>\n            {actions()}\n          </span>\n        </Show>\n        <Show when={local.closable}>\n          <button\n            type=\"button\"\n            class=\"smwb-tab__close\"\n            // Out of the Tab order, so the row keeps its one tab stop; Delete on the tab closes it.\n            tabindex={-1}\n            aria-label={local.closeLabel}\n            disabled={Boolean(local.disabled)}\n            // A press does not take focus from where it is: from the tab being closed, or the page.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={(event) => close(event, \"button\")}\n          >\n            <Icon name=\"close\" size={16} />\n          </button>\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default Tab;\n"],"names":["isModifiedClick","event","button","ctrlKey","metaKey","shiftKey","altKey","hasModifier","ACTIONS_TRIGGER","FIRST_MENU_ITEM","focusPopupOf","trigger","id","getAttribute","split","item","ownerDocument","getElementById","querySelector","focus","preventScroll","Tab","props","ctx","useTabsContext","root","setRoot","createSignal","merged","mergeProps","isActive","stacked","closeLabel","local","rest","splitProps","index","registerTab","disabled","Boolean","closable","requestClose","close","icon","children","label","actionsApi","actions","given","hasActions","toArray","length","rippleActions","actionsEl","active","value","tag","href","undefined","inert","onClick","preventDefault","callHandler","onChange","reason","closing","onClose","onKeyDown","defaultPrevented","target","currentTarget","key","click","onPointerDown","onRipple","onMouseDown","tabStop","keyshortcuts","filter","join","wrapped","draggable","reorderable","renderTab","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","tabId","hasPanels","panelId","_$memo","role","tabindex","_el$","_tmpl$3","_ref$2","contentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","api","classes","child","fallback","_el$4","_tmpl$6","_el$5","_tmpl$4","_ref$3","_el$6","_tmpl$5","$$click","$$mousedown","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_v$3","_v$4","_$className","_$delegateEvents"],"mappings":";;;;;;;;;AAgHA,MAAMA,KAAkBA,CAACC,MACvBA,EAAMC,WAAW,KAAKD,EAAME,WAAWF,EAAMG,WAAWH,EAAMI,YAAYJ,EAAMK,QAE5EC,KAAcA,CAACN,MAAkCA,EAAME,WAAWF,EAAMG,WAAWH,EAAMK,UAAUL,EAAMI,UAGzGG,KAAkB,2FAGlBC,KAAkB,kDAGlBC,KAAeA,CAACC,MAA+B;AACnD,aAAWC,KAAMD,EAAQE,aAAa,eAAe,GAAGC,MAAM,KAAK,KAAK,IAAI;AAC1E,UAAMC,IAAOH,IAAKD,EAAQK,cAAcC,eAAeL,CAAE,GAAGM,cAA2BT,EAAe,IAAI;AAC1G,QAAIM,GAAM;AAERA,MAAAA,EAAKI,MAAM;AAAA,QAAEC,eAAe;AAAA,MAAA,CAAM;AAClC;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAASC,GAAIC,GAA2C;AAC7D,QAAMC,IAAMC,EAAAA,GACN,CAACC,GAAMC,CAAO,IAAIC,EAAAA,GAClBC,IAASC,EAAW;AAAA,IAAEC,UAAU;AAAA,IAAOC,SAAS;AAAA,IAAOC,YAAY;AAAA,EAAA,GAAeV,CAAK,GACvF,CAACW,GAAOC,CAAI,IAAIC,EAAWP,GAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA,CACD,GAIKQ,IAAQb,IACVA,EAAIc,YAAYZ,GAAM;AAAA,IACpBb,IAAIA,MAAMqB,EAAMrB;AAAAA,IAChB0B,UAAUA,MACRC,EAAQN,EAAMK,YAAahB,EAAM,eAAe,MAAM,MAAQA,EAAM,eAAe,MAAM;AAAA,IAC3FkB,UAAUA,MAAMD,EAAQN,EAAMO;AAAAA,IAC9BC,cAAexC,CAAAA,MAAUyC,EAAMzC,GAAO,KAAK;AAAA,EAAA,CAC5C,IACD,MAAM,IAKJ0C,IAAOC,EAAS,MAAMX,EAAMU,IAAI,GAChCE,IAAQD,EAAS,MAAMX,EAAMY,KAAK,GAGlCC,IAA4B;AAAA,IAAEJ,OAAQzC,CAAAA,MAAUyC,EAAMzC,GAAO,SAAS;AAAA,EAAA,GACtE8C,IAAUH,EAAS,MAAM;AAC7B,UAAMI,IAAQf,EAAMc;AACpB,WAAO,OAAOC,KAAU,aAAcA,EAA8CF,CAAU,IAAIE;AAAAA,EACpG,CAAC,GACKC,IAAaA,MAAeF,EAAQG,QAAAA,EAAUC,SAAS;AAE7D,MAAIC,GACAC;AAEJ,QAAMC,IAASA,MAAgB/B,IAAMA,EAAIgC,YAAYnB,EAAAA,IAAUH,EAAMH,UAE/D0B,IAAMA,MAAcvB,EAAMuB,QAAQvB,EAAMwB,SAASC,SAAY,MAAM,WAEnEC,IAAQA,MAAepB,EAAQN,EAAMK,YAAakB,QAAU,UAE5DI,IAAgF3D,CAAAA,MAAU;AAC9F,QAAI0D,KAAS;AACX1D,MAAAA,EAAM4D,eAAAA;AACN;AAAA,IACF;AAIA,IAFAC,EAAY7B,EAAM2B,SAAS3D,CAAK,GAE5BgC,EAAAA,EAAMwB,SAASC,UAAa1D,GAAgBC,CAAK,MACrDsB,GAAKwC,SAAS9D,GAAOmC,GAAO;AAAA,EAC9B,GAEMM,IAAQA,CAACzC,GAAc+D,MAAiC;AAE5DzC,IAAAA,GAAK0C,QAAQ7B,EAAAA,GAAS4B,CAAM,GAC5B/B,EAAMiC,UAAUjE,GAAO+D,CAAM;AAAA,EAC/B,GAGMG,IAAqFlE,CAAAA,MAAU;AAEnG,QADA6D,EAAY7B,EAAMkC,WAAWlE,CAAK,GAC9BgC,EAAAA,EAAMK,YAAYrC,EAAMmE,oBAAoBnE,EAAMoE,WAAWpE,EAAMqE;AACvE,UAAId,EAAAA,MAAU,YAAYvD,EAAMsE,QAAQ;AACtCtE,QAAAA,EAAM4D,eAAAA,GACN5D,EAAMqE,cAAcE,MAAAA;AAAAA,eACXvC,EAAMO,aAAavC,EAAMsE,QAAQ,YAAYtE,EAAMsE,QAAQ,gBAAgB,CAAChE,GAAYN,CAAK;AACtGA,QAAAA,EAAM4D,eAAAA,GACNnB,EAAMzC,GAAO,KAAK;AAAA,eACTgD,QAAiBhD,EAAMsE,QAAQ,iBAAkBtE,EAAMsE,QAAQ,SAAStE,EAAMI,WAAY;AAGnG,cAAMM,IAAU0C,GAAWnC,cAA2BV,EAAe;AACrE,QAAIG,MACFV,EAAM4D,eAAAA,GACNlD,EAAQQ,MAAAA,GAEJR,EAAQE,aAAa,eAAe,MAAM,UAC5CF,EAAQ6D,MAAAA,GAEV9D,GAAaC,CAAO;AAAA,MAExB;AAAA;AAAA,EACF,GAEM8D,IAAwFxE,CAAAA,MAAU;AACtG6D,IAAAA,EAAY7B,EAAMwC,eAAexE,CAAK,GACtCmD,GAAesB,SAASzE,CAAK;AAAA,EAC/B,GAKM0E,IAAoF1E,CAAAA,MAAU;AAClG6D,IAAAA,EAAY7B,EAAM0C,aAAa1E,CAAK,GAChCA,EAAMC,WAAW,KAAK+B,EAAMO,YAAY,CAACP,EAAMK,aACjDrC,EAAM4D,eAAAA,GACNnB,EAAMzC,GAAO,aAAa;AAAA,EAE9B,GAGM2E,IAAUA,MAAgBrD,IAAMA,EAAIqD,QAAQxC,GAAO,IAAKH,EAAM2C,WAAWtB,EAAAA,GAKzEuB,IAAeA,MACnB,CACEvD,EAAM,mBAAmB,GACzB,CAACW,EAAMK,YAAYL,EAAMO,WAAW,qBAAqBkB,QACzD,CAACzB,EAAMK,YAAYW,MAAe,0BAA0BS,QAC5D,CAACzB,EAAMK,YAAYL,EAAMO,WAAW,qBAAqBkB,QACxDzB,EAAMK,WAAyEoB,SAA9D,2DAAuE,EAExFoB,OAAOvC,OAAO,EACdwC,KAAK,GAAG,KAAKrB,QAGZsB,IAAUA,MAAe/C,EAAMO,aAAakB,UAAaX,QAAcW,QAKvEuB,IAAYA,MAChB1D,GAAK2D,YAAAA,KAAiB,CAACjD,EAAMK,YAAYhB,EAAM,eAAe,MAAM,MAAQA,EAAM,eAAe,MAAM,SACnG,KACAoC,QAEAyB,IAAYA,MAAeC,EAC9BC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAE/B,EAAAA;AAAAA,IAAK;AAAA,EAAA,GACZtB,GAAI;AAAA,IAAAsD,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAU1D,EAAMuD,KAAK9D,CAAO;AAAC,aAAAgE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAC3BG,EAAG,YAAY3D,EAAM4D,OAAO;AAAA,QACjC,oBAAoBvC,EAAAA;AAAAA,QACpB,qBAAqBrB,EAAMF;AAAAA,QAC3B,sBAAsBE,EAAMK;AAAAA,MAAAA,CAC7B;AAAA,IAAC;AAAA,IAAA,IACF1B,KAAE;AAAA,aAAEqB,EAAMrB,MAAMW,GAAKuE,MAAM1D,GAAO;AAAA,IAAC;AAAA,IAAA,IAAA,kBAAA;AAAA,aACpBH,EAAM,eAAe,MAAMV,GAAKwE,UAAAA,IAAcxE,EAAIyE,QAAQ5D,GAAO,IAAIsB;AAAAA,IAAU;AAAA,IAAA,IAE9FD,OAAI;AAAA,aAAEwC,EAAA,MAAA,CAAA,CAAAtC,GAAO,MAAGD,SAAYzB,EAAMwB;AAAAA,IAAI;AAAA,IAAA,IACtCwB,YAAS;AAAA,aAAEgB,EAAA,MAAA,CAAA,CAAAjB,GAAS,EAAA,IAAGtB,SAAYuB,EAAAA;AAAAA,IAAW;AAAA,IAC9CrB,SAAAA;AAAAA,IACAO,WAAAA;AAAAA,IACAM,eAAAA;AAAAA,IACAE,aAAAA;AAAAA,IAIAuB,MAAI;AAAA,IAAA,IAAA,kBAAA;AAAA,aACW5C,EAAAA;AAAAA,IAAQ;AAAA,IAAA,IAAA,kBAAA;AAAA,aACRrB,EAAMK,YAAYoB;AAAAA,IAAS;AAAA,IAAA,IAAA,sBAAA;AAAA,aACvBmB,EAAAA;AAAAA,IAAc;AAAA,IAAA,IACjCsB,WAAQ;AAAA,aAAEvB,EAAAA,IAAY,IAAI;AAAA,IAAE;AAAA,IAAA,IAC5BtC,WAAQ;AAAA,aAAE2D,EAAA,MAAAzC,EAAAA,MAAU,QAAQ,MAAGvB,EAAMK,WAAWoB;AAAAA,IAAS;AAAA,IAAA,IAAAd,WAAA;AAAA,aAAA,EAAA,MAAA;AAAA,YAAAwD,IAAAC,GAAAA,GAAAC,IAEpBX,EAAU1D,EAAMsE,UAAU;AAAC,sBAAAD,KAAA,cAAAE,EAAAF,GAAAF,CAAA,GAAAK,EAAAL,GAAAhB,EAC7DsB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEhE,EAAAA;AAAAA,UAAM;AAAA,UAAA,IAAAC,WAAA;AAAA,gBAAAgE,IAAAC,GAAAA;AAAAJ,mBAAAA,EAAAG,GAEbjE,CAAI,GAAAiE;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAH,EAAAL,GAAAhB,EAGRsB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE9D,EAAAA;AAAAA,UAAO;AAAA,UAAA,IAAAD,WAAA;AAAA,gBAAAkE,IAAAC,GAAAA;AAAAN,mBAAAA,EAAAK,GACmBjE,CAAK,GAAAiE;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAV;AAAAA,MAAA,GAAA,GAAAhB,EAG5C4B,IAAM;AAAA,QAACC,WAAYC,OAAS9D,IAAgB8D;AAAAA,QAAMC,SAAS;AAAA,UAAEC,OAAO;AAAA,QAAA;AAAA,MAAoB,CAAC,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAI9F,SAAAhC,EACGsB,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAE3B,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAEqC,WAAQ;AAAA,aAAElC,EAAAA;AAAAA,IAAW;AAAA,IAAA,IAAAvC,WAAA;AAAA,UAAA0E,IAAAC,GAAAA;AAAAd,aAAAA,EAAAa,GAQvCnC,GAAS,IAAA,GAAAsB,EAAAa,GAAAlC,EACTsB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE1D,EAAAA;AAAAA,QAAY;AAAA,QAAA,IAAAL,WAAA;AAAA,cAAA4E,IAAAC,GAAAA,GAAAC,IACerE;AAAS,wBAAAqE,KAAA,aAAAlB,EAAAkB,GAAAF,CAAA,IAATnE,IAASmE,GAAAf,EAAAe,GAC3CzE,CAAO,GAAAyE;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAf,EAAAa,GAAAlC,EAGXsB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE1E,EAAMO;AAAAA,QAAQ;AAAA,QAAA,IAAAI,WAAA;AAAA,cAAA+E,IAAAC,GAAAA;AAAAD,iBAAAA,EAAAE,UAUZ5H,CAAAA,MAAUyC,EAAMzC,GAAO,QAAQ,GAAC0H,EAAAG,cAD5B7H,CAAAA,MAAUA,EAAM4D,eAAAA,GAAgB4C,EAAAkB,GAAAvC,EAG7C2C,GAAI;AAAA,YAACC,MAAI;AAAA,YAASC,MAAM;AAAA,UAAA,CAAE,CAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IANfnG,EAAMD,YAAUqG,IAClB9F,EAAQN,EAAMK;AAAS8F,mBAAAA,MAAAD,EAAAG,KAAAC,EAAAZ,GAAA,cAAAQ,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,MAAAb,EAAArF,WAAA6F,EAAAK,IAAAH,IAAAF;AAAAA,UAAA,GAAA;AAAA,YAAAG,GAAA5E;AAAAA,YAAA8E,GAAA9E;AAAAA,UAAAA,CAAA,GAAAiE;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAO,EAAAC,CAAAA,MAAA;AAAA,YAAAM,IAnB9B7C,EAAG,iBAAiB;AAAA,UACzB,yBAAyBtC,EAAAA;AAAAA,UACzB,2BAA2BrB,EAAMK;AAAAA,QAAAA,CAClC,GAACoG,IACSzD,EAAAA;AAAWwD,eAAAA,MAAAN,EAAAG,KAAAK,EAAArB,GAAAa,EAAAG,IAAAG,CAAA,GAAAC,MAAAP,EAAAK,KAAAD,EAAAjB,GAAA,aAAAa,EAAAK,IAAAE,CAAA,GAAAP;AAAAA,MAAA,GAAA;AAAA,QAAAG,GAAA5E;AAAAA,QAAA8E,GAAA9E;AAAAA,MAAAA,CAAA,GAAA4D;AAAAA,IAAA;AAAA,EAAA,CAAA;AA0B9B;AAEmBsB,EAAA,CAAA,aAAA,OAAA,CAAA;"}
+{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { Icon } from \"../../../base/icon\";\nimport { useTabsContext, type TabCloseReason } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport type { TabCloseReason };\n\n/** What a function given as `actions` receives. */\nexport interface TabActionsApi {\n  /**\n   * Ask for the tab to close, as its close button does: `onClose` is called with this event and the\n   * reason \"actions\", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus\n   * is in a menu drawn outside the row. Call it from the item that closes the tab (\"Terminate\"), with\n   * that item's event. It works on a tab that is not `closable`.\n   */\n  close: (event: Event) => void;\n}\n\n// `onClose` is the close button's, not the element's `close` event handler.\nexport interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, \"onClose\"> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  /**\n   * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets\n   * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\n   * is the stop while `isActive`.\n   */\n  tabStop?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  /**\n   * A decorative status marker drawn left of the label (a running/done/failed icon). Its\n   * wrapper renders `aria-hidden=\"true\"`, so the tab's accessible name stays the label\n   * alone: the icon is not announced on top of it. To have the status read out, put it\n   * in the `label` itself.\n   */\n  icon?: JSX.Element;\n  stacked?: boolean;\n  /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */\n  tag?: string;\n  /**\n   * Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\n   * no `target`: a tab never opens another window), so it opens in place and middle click, copy\n   * link and the like work. A router takes over the plain click in `onClick` with\n   * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n   * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n   * \"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\n   * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\n   * editor, and its default is prevented so nothing opens.\n   */\n  href?: string;\n  disabled?: boolean;\n  /**\n   * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n   * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A\n   * middle click on the tab closes it as well (`reason` \"middleClick\"): the browser's own\n   * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the\n   * click never selects. The tab does not close itself: `onClose` asks for it and the owner\n   * removes the `Tab`. The button is a sibling of the tab, not inside its `role=\"tab\"`, so the\n   * tab's accessible name is its label alone.\n   * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes\n   * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\n   * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\n   * has a disabled button.\n   *\n   * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\n   * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\n   * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n   * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n   *\n   * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n   * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\n   * recreates the tab and drops its focus.\n   */\n  closable?: boolean;\n  /**\n   * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n   * \"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\n   * prevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\n   * or the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\n   * the `Tab`.\n   */\n  onClose?: (event: Event, reason: TabCloseReason) => void;\n  /** Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\"). */\n  closeLabel?: string;\n  /**\n   * Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\n   * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.\n   * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;\n   * the tab's own `ref`, `class` and handlers stay on the `role=\"tab\"` element. It stays in the\n   * accessibility tree as written, inside the tab list (see `closable`).\n   *\n   * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the\n   * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\n   * and clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\n   * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then\n   * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\n   * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n   *\n   * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with\n   * the `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with\n   * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab\n   * removed some other way leaves focus on the page.\n   */\n  actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\n/** A click that asks the browser for something else than \"go here\": a new tab, a new window, a download. */\nconst isModifiedClick = (event: MouseEvent): boolean =>\n  event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;\n\nconst hasModifier = (event: KeyboardEvent): boolean => event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;\n\n/** What the Menu key and Shift+F10 stand for: the actions' trigger. */\nconst ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role=\"button\"]:not([aria-disabled=\"true\"]), [tabindex]';\n\n/** The item of an opened menu that takes focus first. */\nconst FIRST_MENU_ITEM = '[role^=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n/** Focus the first item of the popup `trigger` names in `aria-controls`, if it is there. */\nconst focusPopupOf = (trigger: HTMLElement): void => {\n  for (const id of trigger.getAttribute(\"aria-controls\")?.split(/\\s+/) ?? []) {\n    const item = id ? trigger.ownerDocument.getElementById(id)?.querySelector<HTMLElement>(FIRST_MENU_ITEM) : null;\n    if (item) {\n      // The menu may not be placed yet: a scroll to it would jump to the corner it starts in.\n      item.focus({ preventScroll: true });\n      return;\n    }\n  }\n};\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: \"Close tab\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"href\",\n    \"tabStop\",\n    \"disabled\",\n    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value\n    // is dropped, as in the React `Tab`.\n    \"draggable\",\n    \"closable\",\n    \"onClose\",\n    \"closeLabel\",\n    \"actions\",\n    \"id\",\n    \"aria-controls\",\n    // A tab opens in place: a caller's target is dropped, not passed on.\n    \"target\" as keyof TabProps,\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"onMouseDown\",\n  ]);\n\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx\n    ? ctx.registerTab(root, {\n        id: () => local.id,\n        disabled: () =>\n          Boolean(local.disabled) || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\",\n        closable: () => Boolean(local.closable),\n        requestClose: (event) => close(event, \"key\"),\n      })\n    : () => -1;\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n  // A content-width row cuts a long label with an ellipsis, so a string label is its own title there\n  // and the full text shows on hover. It sits on the label, not on the tab: a title on the tab is\n  // read as its description, next to a name that says the same. A title the caller gave the tab is\n  // the tooltip instead, and the label does not shadow it; a label that is not a string has no text\n  // to give.\n  const fitTitle = (): string | undefined => {\n    const text = label();\n    return ctx?.fit?.() && props.title === undefined && typeof text === \"string\" && text !== \"\" ? text : undefined;\n  };\n  // The actions are drawn whenever they are given, so reading them here, once, is safe. A function\n  // is the tab's to call, with its api: `children` would call it with nothing.\n  const actionsApi: TabActionsApi = { close: (event) => close(event, \"actions\") };\n  const actions = children(() => {\n    const given = local.actions;\n    return typeof given === \"function\" ? (given as (api: TabActionsApi) => JSX.Element)(actionsApi) : given;\n  });\n  const hasActions = (): boolean => actions.toArray().length > 0;\n\n  let rippleActions: RippleActionsRef | undefined;\n  let actionsEl: HTMLSpanElement | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const tag = (): string => local.tag ?? (local.href !== undefined ? \"a\" : \"button\");\n  // Anything but a button is not disabled by the attribute: its clicks are swallowed here.\n  const inert = (): boolean => Boolean(local.disabled) && tag() !== \"button\";\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (inert()) {\n      event.preventDefault();\n      return;\n    }\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    // A link tab opens elsewhere on a modified click: the browser's, not a selection here.\n    if (local.href !== undefined && isModifiedClick(event)) return;\n    ctx?.onChange(event, index());\n  };\n\n  const close = (event: Event, reason: TabCloseReason): void => {\n    // The row notes which tab is closing before the owner removes it.\n    ctx?.closing(index(), reason);\n    local.onClose?.(event, reason);\n  };\n\n  // A button clicks on Enter and Space by itself, a link on Enter only: Space does it here.\n  const onKeyDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (local.disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n    if (tag() !== \"button\" && event.key === \" \") {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (local.closable && (event.key === \"Delete\" || event.key === \"Backspace\") && !hasModifier(event)) {\n      event.preventDefault();\n      close(event, \"key\");\n    } else if (hasActions() && (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey))) {\n      // The Menu key, or Shift+F10: the keyboard's right click. The trigger takes focus first, so\n      // the menu it opens hands focus back to it on Escape.\n      const trigger = actionsEl?.querySelector<HTMLElement>(ACTIONS_TRIGGER);\n      if (trigger) {\n        event.preventDefault();\n        trigger.focus();\n        // The keys mean \"open\": a menu that already is open is not toggled shut.\n        if (trigger.getAttribute(\"aria-expanded\") !== \"true\") {\n          trigger.click();\n        }\n        focusPopupOf(trigger);\n      }\n    }\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  // Middle click on a closable tab closes it, IDE-style: the browser's own middle-click\n  // action (autoscroll, opening a link tab in a new window) is suppressed and the tab is\n  // never selected. A middle click on a tab that is not closable is the browser's, untouched.\n  const onMouseDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseDown, event);\n    if (event.button === 1 && local.closable && !local.disabled) {\n      event.preventDefault();\n      close(event, \"middleClick\");\n    }\n  };\n\n  // Inside Tabs the row decides, whatever the caller passed.\n  const tabStop = (): boolean => (ctx ? ctx.tabStop(index()) : (local.tabStop ?? active()));\n\n  // What the tab answers to, for assistive technology; the caller's own list is kept.\n  // The chords are best-effort: browsers reserve Mod+W and Mod+Shift+[/] in a page of\n  // their own tabs, and they bite only in an embedded webview.\n  const keyshortcuts = (): string | undefined =>\n    [\n      props[\"aria-keyshortcuts\"],\n      !local.disabled && local.closable ? \"Delete Backspace\" : undefined,\n      !local.disabled && hasActions() ? \"Shift+F10 ContextMenu\" : undefined,\n      !local.disabled && local.closable ? \"Meta+W Control+W\" : undefined,\n      !local.disabled ? \"Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  // A tab given neither `closable` nor `actions` is the bare element, as it always was.\n  const wrapped = (): boolean => local.closable !== undefined || actions() !== undefined;\n\n  // Only a reorderable row makes its items draggable, and a disabled tab never — the same\n  // contract as the registration's `disabled`. Rendered on the item (the wrapper, or the\n  // bare tab when there is none), so `draggable` is in the server markup, as in React.\n  const draggable = (): boolean | undefined =>\n    ctx?.reorderable() && !local.disabled && props[\"aria-disabled\"] !== true && props[\"aria-disabled\"] !== \"true\"\n      ? true\n      : undefined;\n\n  const renderTab = (): JSX.Element => (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      id={local.id ?? ctx?.tabId(index())}\n      aria-controls={local[\"aria-controls\"] ?? (ctx?.hasPanels() ? ctx.panelId(index()) : undefined)}\n      // A disabled link has no href, so it is no link to follow or to focus.\n      href={inert() ? undefined : local.href}\n      draggable={wrapped() ? undefined : draggable()}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      onMouseDown={onMouseDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      aria-keyshortcuts={keyshortcuts()}\n      tabindex={tabStop() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\" aria-hidden=\"true\">\n            {icon()}\n          </span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\" title={fitTitle()}>\n            {label()}\n          </span>\n        </Show>\n      </span>\n      <Ripple actionRef={(api) => (rippleActions = api)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n\n  return (\n    <Show when={wrapped()} fallback={renderTab()}>\n      <div\n        class={cn(\"smwb-tab-item\", {\n          \"smwb-tab-item--active\": active(),\n          \"smwb-tab-item--disabled\": local.disabled,\n        })}\n        draggable={draggable()}\n      >\n        {renderTab()}\n        <Show when={hasActions()}>\n          <span class=\"smwb-tab__actions\" ref={actionsEl}>\n            {actions()}\n          </span>\n        </Show>\n        <Show when={local.closable}>\n          <button\n            type=\"button\"\n            class=\"smwb-tab__close\"\n            // Out of the Tab order, so the row keeps its one tab stop; Delete on the tab closes it.\n            tabindex={-1}\n            aria-label={local.closeLabel}\n            disabled={Boolean(local.disabled)}\n            // A press does not take focus from where it is: from the tab being closed, or the page.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={(event) => close(event, \"button\")}\n          >\n            <Icon name=\"close\" size={16} />\n          </button>\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default Tab;\n"],"names":["isModifiedClick","event","button","ctrlKey","metaKey","shiftKey","altKey","hasModifier","ACTIONS_TRIGGER","FIRST_MENU_ITEM","focusPopupOf","trigger","id","getAttribute","split","item","ownerDocument","getElementById","querySelector","focus","preventScroll","Tab","props","ctx","useTabsContext","root","setRoot","createSignal","merged","mergeProps","isActive","stacked","closeLabel","local","rest","splitProps","index","registerTab","disabled","Boolean","closable","requestClose","close","icon","children","label","fitTitle","text","fit","title","undefined","actionsApi","actions","given","hasActions","toArray","length","rippleActions","actionsEl","active","value","tag","href","inert","onClick","preventDefault","callHandler","onChange","reason","closing","onClose","onKeyDown","defaultPrevented","target","currentTarget","key","click","onPointerDown","onRipple","onMouseDown","tabStop","keyshortcuts","filter","join","wrapped","draggable","reorderable","renderTab","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","tabId","hasPanels","panelId","_$memo","role","tabindex","_el$","_tmpl$3","_ref$2","contentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","_$effect","_$setAttribute","Ripple","actionRef","api","classes","child","fallback","_el$4","_tmpl$6","_el$5","_tmpl$4","_ref$3","_el$6","_tmpl$5","$$click","$$mousedown","Icon","name","size","_p$","_v$","_v$2","e","t","_v$3","_v$4","_$className","_$delegateEvents"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { createComponent as u, use as R, spread as et, mergeProps as tt, insert as h, effect as T, setAttribute as C, setStyleProperty as pe, style as nt, memo as ye, template as L, isServer as rt, delegateEvents as ot } from "solid-js/web";
-import { mergeProps as st, splitProps as lt, createUniqueId as at, createSignal as f, onMount as Ie, createEffect as K, on as j, onCleanup as J, Show as O, For as it, createMemo as Le, children as xe, createComputed as Ce } from "solid-js";
+import { mergeProps as st, splitProps as lt, createUniqueId as at, createSignal as b, onMount as Ie, createEffect as K, on as j, onCleanup as J, Show as O, For as it, createMemo as Le, children as xe, createComputed as Ce } from "solid-js";
 import ct from "clsx";
 import { debounce as dt } from "../../../utils/debounce.js";
 import { animate as ut } from "../../../utils/animate.js";
@@ -28,15 +28,16 @@ function Ft(w) {
     scrollButtons: !1,
     overflowMenu: !1,
     dense: !1,
+    fit: !1,
     orientation: "horizontal",
     scrollBackAriaLabel: "Scroll tabs back",
     scrollForwardAriaLabel: "Scroll tabs forward",
     overflowMenuAriaLabel: "More tabs"
-  }, w), [l, Me] = lt(p, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "onReorder", "overflowMenu", "overflowMenuAriaLabel", "dense", "orientation", "panels", "id", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), Ee = at(), Z = () => l.id ?? Ee, [M, ee] = f([]), Se = (e) => M().find((r) => r.index() === e)?.id() ?? `${Z()}-tab-${e}`, $e = (e) => `${Z()}-panel-${e}`, [Ae, De] = f(), [Re, Te] = f(!1), [te, B] = f(null), [Oe, Be] = f(!1), [_, ne] = f({
+  }, w), [l, Me] = lt(p, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "onReorder", "overflowMenu", "overflowMenuAriaLabel", "dense", "fit", "orientation", "panels", "id", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), Ee = at(), Z = () => l.id ?? Ee, [M, ee] = b([]), Se = (e) => M().find((r) => r.index() === e)?.id() ?? `${Z()}-tab-${e}`, $e = (e) => `${Z()}-panel-${e}`, [Ae, De] = b(), [Re, Te] = b(!1), [te, B] = b(null), [Oe, Be] = b(!1), [_, ne] = b({
     root: {}
-  }), [W, re] = f(!1), [F, oe] = f(!1), [se, le] = f([]), [ae, q] = f(!1);
-  let ie, c, b, v = null;
-  const [E, Pe] = f();
+  }), [W, re] = b(!1), [F, oe] = b(!1), [se, le] = b([]), [ae, q] = b(!1);
+  let ie, c, f, v = null;
+  const [E, Pe] = b();
   let ke = 0;
   const ze = () => {
     let e;
@@ -50,8 +51,8 @@ function Ft(w) {
       };
     }
     let r = null, t = null;
-    if (c && b && b.children.length > 0) {
-      const s = b.children[l.value];
+    if (c && f && f.children.length > 0) {
+      const s = f.children[l.value];
       r = s ? s.getBoundingClientRect() : null, l.indicatorContent && (t = s?.querySelector(".smwb-tab__content")?.getBoundingClientRect() ?? null);
     }
     return {
@@ -90,7 +91,7 @@ function Ft(w) {
     }
     const e = c.scrollWidth - c.clientWidth;
     re(c.scrollLeft > 1), oe(c.scrollLeft < e - 1);
-    const r = l.overflowMenu ? bt(b ? Array.from(b.children).map((t) => {
+    const r = l.overflowMenu ? bt(f ? Array.from(f.children).map((t) => {
       const s = t;
       return {
         offsetLeft: s.offsetLeft,
@@ -105,8 +106,8 @@ function Ft(w) {
   }, de = (e) => {
     c && N(c.scrollLeft + e * c.clientWidth * Ct);
   }, ue = (e) => {
-    if (!c || !b) return;
-    const r = b.children[e];
+    if (!c || !f) return;
+    const r = f.children[e];
     if (!r) return;
     const t = c.getBoundingClientRect(), s = r.getBoundingClientRect();
     s.left < t.left ? N(c.scrollLeft + (s.left - t.left) - _e) : s.right > t.right && N(c.scrollLeft + (s.right - t.right) + _e);
@@ -123,13 +124,13 @@ function Ft(w) {
       passive: !0
     });
     let t;
-    typeof ResizeObserver < "u" && b && (t = new ResizeObserver(e), c && t.observe(c), Array.from(b.children).forEach((s) => t?.observe(s))), S(), J(() => {
+    typeof ResizeObserver < "u" && f && (t = new ResizeObserver(e), c && t.observe(c), Array.from(f.children).forEach((s) => t?.observe(s))), S(), J(() => {
       e.cancel(), r?.removeEventListener("resize", e), c?.removeEventListener("scroll", S), t?.disconnect();
     });
   }), K(() => {
     _(), Ke();
   });
-  const g = () => Array.from(b?.querySelectorAll('[role="tab"]') ?? []), y = (e) => e.closest(".smwb-tab-item") ?? e, I = (e) => e ? g().findIndex((r) => y(r).contains(e)) : -1, $ = (e) => !e || e.getAttribute("aria-disabled") === "true" || e.disabled === !0, We = () => {
+  const g = () => Array.from(f?.querySelectorAll('[role="tab"]') ?? []), y = (e) => e.closest(".smwb-tab-item") ?? e, I = (e) => e ? g().findIndex((r) => y(r).contains(e)) : -1, $ = (e) => !e || e.getAttribute("aria-disabled") === "true" || e.disabled === !0, We = () => {
     const e = E()?.length, r = e === void 0 || l.value >= 0 && l.value < e ? l.value : 0, t = M();
     if (!t.some((n) => n.index() === r && n.disabled())) return r;
     const s = t.filter((n) => !n.disabled()).map((n) => n.index()).filter((n) => n >= 0);
@@ -144,7 +145,7 @@ function Ft(w) {
     isDisabled: (e) => $(g()[e])
   });
   let x = null, P = null, A = null;
-  const V = (e) => e instanceof Element ? y(e) : null, be = () => {
+  const V = (e) => e instanceof Element && e !== f ? y(e) : null, be = () => {
     P?.classList.remove("smwb-tab-item--dragging"), A?.classList.remove("smwb-tab-item--drop-target"), P = null, A = null;
   }, qe = (e) => {
     if (!l.onReorder) return;
@@ -198,7 +199,7 @@ function Ft(w) {
     }
   };
   K(j(E, () => {
-    const e = b?.ownerDocument, r = v;
+    const e = f?.ownerDocument, r = v;
     if (e && r && !r.item.isConnected && (v = null, !e.activeElement || e.activeElement === e.body)) {
       const s = g(), n = Math.min(r.index, s.length - 1), o = [...s.keys()].filter((i) => !$(s[i])), a = o.find((i) => i >= n) ?? o[o.length - 1];
       if (a !== void 0) {
@@ -221,6 +222,7 @@ function Ft(w) {
     }));
   }, je = {
     value: () => l.value,
+    fit: () => l.fit,
     tabStop: (e) => fe() === e,
     tabId: Se,
     panelId: $e,
@@ -269,6 +271,7 @@ function Ft(w) {
           get class() {
             return ct("smwb-tabs", {
               "smwb-tabs--dense": l.dense,
+              "smwb-tabs--fit": l.fit,
               "smwb-tabs--overflow-start": W(),
               "smwb-tabs--overflow-end": F()
             }, l.class);
@@ -290,7 +293,7 @@ function Ft(w) {
               t: void 0
             }), n;
           }
-        }), r), R((n) => c = n, r), t.addEventListener("dragend", He), t.addEventListener("drop", Ve), t.addEventListener("dragover", Ne), t.addEventListener("dragstart", qe), t.$$focusout = Ue, t.$$focusin = Ge, t.$$keydown = Xe, R((n) => b = n, t), h(t, u(Mt, {
+        }), r), R((n) => c = n, r), t.addEventListener("dragend", He), t.addEventListener("drop", Ve), t.addEventListener("dragover", Ne), t.addEventListener("dragstart", qe), t.$$focusout = Ue, t.$$focusin = Ge, t.$$keydown = Xe, R((n) => f = n, t), h(t, u(Mt, {
           onItems: Pe,
           get children() {
             return l.children;
@@ -359,7 +362,7 @@ function Ft(w) {
                     return se();
                   },
                   children: (n) => {
-                    const o = () => g()[n], a = o(), [i, D] = f(H(a)), [X, Ye] = f(!!k(a)), Ze = Le(() => {
+                    const o = () => g()[n], a = o(), [i, D] = b(H(a)), [X, Ye] = b(!!k(a)), Ze = Le(() => {
                       const d = M().find((m) => m.index() === n);
                       return d ? d.disabled() : $(o());
                     });