@smwb/ui-solid 1.0.0 → 2.1.0

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -1,32 +1,46 @@
-import { use as $, spread as C, mergeProps as v, insert as n, createComponent as d, template as s, effect as w, setAttribute as A, delegateEvents as B } from "solid-js/web";
+import { use as w, spread as E, mergeProps as W, insert as u, createComponent as p, template as d, effect as v, setAttribute as _, delegateEvents as A } from "solid-js/web";
 import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
-import { mergeProps as E, splitProps as P, children as y, For as I, Show as L } from "solid-js";
-import S from "clsx";
-import { createControllableState as k } from "../../../primitives/createControllableState.js";
-import { mergeRefs as F } from "../../../primitives/mergeRefs.js";
-var R = /* @__PURE__ */ s("<button type=button class=smwb-breadcrumbs__expand>…"), V = /* @__PURE__ */ s("<nav><ol class=smwb-breadcrumbs__list>"), j = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__item>"), q = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__separator aria-hidden=true>");
-function N(c) {
-  const i = E({
+import { mergeProps as L, splitProps as B, children as y, For as P, Show as S, createSignal as I } from "solid-js";
+import M from "clsx";
+import { createControllableState as T } from "../../../primitives/createControllableState.js";
+import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
+var F = /* @__PURE__ */ d("<li class=smwb-breadcrumbs__item>"), H = /* @__PURE__ */ d("<button type=button class=smwb-breadcrumbs__expand>…"), R = /* @__PURE__ */ d("<nav><ol class=smwb-breadcrumbs__list>"), V = /* @__PURE__ */ d("<li class=smwb-breadcrumbs__separator aria-hidden=true>");
+function g(a) {
+  return a.scrollWidth > a.clientWidth;
+}
+function j(a) {
+  const [c, e] = I(void 0), o = (r) => {
+    const s = r.currentTarget, n = g(s) || Array.from(s.children).some((i) => i instanceof HTMLElement && g(i));
+    e(a.noWrap && n ? s.textContent ?? void 0 : void 0);
+  }, m = () => e(void 0);
+  return (() => {
+    var r = F();
+    return r.addEventListener("mouseleave", m), r.addEventListener("mouseenter", o), u(r, () => a.children), v(() => _(r, "title", a.noWrap ? c() : void 0)), r;
+  })();
+}
+function O(a) {
+  const c = L({
     separator: "/",
     maxItems: 8,
     itemsBeforeCollapse: 1,
     itemsAfterCollapse: 1,
-    expandLabel: "Show path"
-  }, c), [e, o] = P(i, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "children", "ref", "data-testid"]), [u, b] = k({
+    expandLabel: "Show path",
+    noWrap: !1
+  }, a), [e, o] = B(c, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "noWrap", "children", "ref", "data-testid"]), [m, r] = T({
     value: () => e.expanded,
     defaultValue: !1,
     onChange: () => e.onExpand?.()
-  }), f = y(() => e.children), l = () => f.toArray(), h = () => !u() && l().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < l().length, _ = () => b(!0), m = () => {
-    const r = l();
-    return h() ? [...r.slice(0, e.itemsBeforeCollapse), (() => {
-      var t = R();
-      return t.$$click = _, w(() => A(t, "aria-label", e.expandLabel)), t;
-    })(), ...r.slice(r.length - e.itemsAfterCollapse)] : r;
+  }), s = y(() => e.children), n = () => s.toArray(), i = () => !m() && n().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < n().length, x = () => r(!0), b = () => {
+    const t = n();
+    return i() ? [...t.slice(0, e.itemsBeforeCollapse), (() => {
+      var l = H();
+      return l.$$click = x, v(() => _(l, "aria-label", e.expandLabel)), l;
+    })(), ...t.slice(t.length - e.itemsAfterCollapse)] : t;
   };
   return (() => {
-    var r = V(), t = r.firstChild, p = F(e.ref);
-    return typeof p == "function" && $(p, r), C(r, v(o, {
+    var t = R(), l = t.firstChild, f = k(e.ref);
+    return typeof f == "function" && w(f, t), E(t, W(o, {
       get "data-testid"() {
         return e["data-testid"] ?? "breadcrumbs";
       },
@@ -34,29 +48,31 @@ function N(c) {
         return o["aria-label"] ?? "breadcrumb";
       },
       get class() {
-        return S("smwb-breadcrumbs", e.class);
+        return M("smwb-breadcrumbs", e.noWrap && "smwb-breadcrumbs--no-wrap", e.class);
       }
-    }), !1, !0), n(t, d(I, {
+    }), !1, !0), u(l, p(P, {
       get each() {
-        return m();
+        return b();
       },
-      children: (g, x) => [(() => {
-        var a = j();
-        return n(a, g), a;
-      })(), d(L, {
+      children: (C, $) => [p(j, {
+        get noWrap() {
+          return e.noWrap;
+        },
+        children: C
+      }), p(S, {
         get when() {
-          return x() < m().length - 1;
+          return $() < b().length - 1;
         },
         get children() {
-          var a = q();
-          return n(a, () => e.separator), a;
+          var h = V();
+          return u(h, () => e.separator), h;
         }
       })]
-    })), r;
+    })), t;
   })();
 }
-B(["click"]);
+A(["click"]);
 export {
-  N as Breadcrumbs
+  O as Breadcrumbs
 };
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"breadcrumbs\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"breadcrumb\"}\n      class={cn(\"smwb-breadcrumbs\", local.class)}\n    >\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","props","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","children","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$","_tmpl$","$$click","_$effect","_$setAttribute","_el$2","_tmpl$2","_el$3","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","crumb","index","_el$4","_tmpl$3","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AA2BO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IAAEC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAGC,qBAAqB;AAAA,IAAGC,oBAAoB;AAAA,IAAGC,aAAa;AAAA,EAAA,GAC1GP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,aACA,YACA,uBACA,sBACA,YACA,YACA,eACA,YACA,OACA,aAAa,CACd,GAEK,CAACU,GAAUC,CAAW,IAAIC,EAAiC;AAAA,IAC/DC,OAAOA,MAAMN,EAAMG;AAAAA,IACnBI,cAAc;AAAA,IACdC,UAAUA,MAAMR,EAAMS,WAAAA;AAAAA,EAAW,CAClC,GAEKC,IAAWC,EAAgB,MAAMX,EAAMY,QAAQ,GAC/CC,IAASA,MAAiBH,EAASI,QAAAA,GAEnCC,IAAYA,MAChB,CAACZ,EAAAA,KACDU,EAAAA,EAASG,SAAShB,EAAMJ,YACxBI,EAAMH,sBAAsBG,EAAMF,qBAAqBe,IAASG,QAE5DC,IAAeA,MAAYb,EAAY,EAAI,GAE3Cc,IAAWA,MAAiB;AAChC,UAAMC,IAAMN,EAAAA;AACZ,WAAKE,EAAAA,IACE,CACL,GAAGI,EAAIC,MAAM,GAAGpB,EAAMH,mBAAmB,IAAC,MAAA;AAAA,UAAAwB,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,UAEuDN,GAAYO,QAAAC,EAAAJ,GAAA,cAAxCrB,EAAMD,WAAW,CAAA,GAAAsB;AAAAA,IAAA,GAAA,GAItF,GAAGF,EAAIC,MAAMD,EAAIH,SAAShB,EAAMF,kBAAkB,CAAC,IAR5BqB;AAAAA,EAU3B;AAEA,UAAA,MAAA;AAAA,QAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAU/B,EAAMgC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBlC,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAa;AAAA,MAAA,IAAA,eAAA;AAAA,eAGtCC,EAAK,YAAY,KAAK;AAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eACvCmC,EAAG,oBAAoBpC,EAAMqC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAGvCC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAAN,UAClBA,CAAC8B,GAAOC,MAAK,EAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE0BF,CAAoB,GAAAE;AAAAA,MAAA,GAAA,GAAAL,EACvDO,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEJ,EAAAA,IAAUzB,EAAAA,EAAWF,SAAS;AAAA,QAAC;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAoC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAEtChD,EAAML,SAAS,GAAAqD;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA,CAIvB,CAAA,GAAAtB;AAAAA,EAAA,GAAA;AAKX;AAE2BwB,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  For,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /**\n   * Keep the trail on one line: the crumbs do not wrap, they shrink and cut their text with an ellipsis, the last one\n   * giving way last, and a cut crumb shows its full text as a `title` on hover. Plain text and a block child (a heading,\n   * `Typography`) are cut with an ellipsis; a crumb laid out as a row (an icon with a label, say) is clipped as far as\n   * its own layout allows. A leading crumb is never narrower than `@breadcrumbsLeadingMinWidth`, so a one- or\n   * two-letter one takes that width even when everything fits, and the last one is never narrower than\n   * `@breadcrumbsLastMinWidth`: in a box smaller than those floors the trail runs past it instead of shrinking further.\n   */\n  noWrap?: boolean;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/** A box whose content runs past it: the crumb itself, or the block it holds (a heading cuts itself). */\nfunction isCut(element: HTMLElement): boolean {\n  return element.scrollWidth > element.clientWidth;\n}\n\n/** One `<li>` of the trail; with `noWrap` it names itself by its full text while that text is cut. */\nfunction Crumb(props: ParentProps<{ noWrap: boolean }>): JSX.Element {\n  const [title, setTitle] = createSignal<string | undefined>(undefined);\n\n  // Measured on every entry: the width the crumb has changes with its container.\n  const handleMouseEnter: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    const item = event.currentTarget;\n    const cut = isCut(item) || Array.from(item.children).some((child) => child instanceof HTMLElement && isCut(child));\n    setTitle(props.noWrap && cut ? (item.textContent ?? undefined) : undefined);\n  };\n  // The title is for the pointer that is over the crumb: it does not outlive it.\n  const handleMouseLeave = (): void => setTitle(undefined);\n\n  return (\n    <li\n      class=\"smwb-breadcrumbs__item\"\n      title={props.noWrap ? title() : undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {props.children}\n    </li>\n  );\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      separator: \"/\" as JSX.Element,\n      maxItems: 8,\n      itemsBeforeCollapse: 1,\n      itemsAfterCollapse: 1,\n      expandLabel: \"Show path\",\n      noWrap: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"noWrap\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"breadcrumbs\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"breadcrumb\"}\n      class={cn(\"smwb-breadcrumbs\", local.noWrap && \"smwb-breadcrumbs--no-wrap\", local.class)}\n    >\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <Crumb noWrap={local.noWrap}>{crumb as JSX.Element}</Crumb>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["isCut","element","scrollWidth","clientWidth","Crumb","props","title","setTitle","createSignal","undefined","handleMouseEnter","event","item","currentTarget","cut","Array","from","children","some","child","HTMLElement","noWrap","textContent","handleMouseLeave","_el$","_tmpl$","addEventListener","_$insert","_$effect","_$setAttribute","Breadcrumbs","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$2","_tmpl$2","$$click","_el$3","_tmpl$3","_el$4","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$createComponent","For","each","crumb","index","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":"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"}

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

@@ -1,17 +1,17 @@
-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 { createComponent as n, insert as i, 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 '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
 /* empty css                                                         */
-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 { 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>"), re = /* @__PURE__ */ c("<span class=smwb-tab__content>"), ae = /* @__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 = (a) => a.button !== 0 || a.ctrlKey || a.metaKey || a.shiftKey || a.altKey, se = (a) => a.ctrlKey || a.metaKey || a.altKey || a.shiftKey, ce = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', de = '[role^="menuitem"]:not([aria-disabled="true"])', be = (a) => {
+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>"), ie = /* @__PURE__ */ c("<button type=button class=smwb-tab__close tabindex=-1>"), ne = /* @__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(de) : null;
+    const f = l ? a.ownerDocument.getElementById(l)?.querySelector(be) : null;
     if (f) {
       f.focus({
         preventScroll: !0
@@ -20,12 +20,12 @@ const ie = (a) => a.button !== 0 || a.ctrlKey || a.metaKey || a.shiftKey || a.al
     }
   }
 };
-function ve(a) {
-  const l = Y(), [f, I] = Q(), E = V({
+function De(a) {
+  const l = Z(), [f, I] = V(), E = X({
     isActive: !1,
     stacked: !1,
     closeLabel: "Close tab"
-  }, a), [t, q] = X(E, [
+  }, a), [t, q] = Y(E, [
     "class",
     "label",
     "isActive",
@@ -58,37 +58,40 @@ function ve(a) {
     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 = () => [a["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 && a["aria-disabled"] !== !0 && a["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 = () => n(U, J({
     get component() {
       return g();
     }
@@ -98,7 +101,7 @@ function ve(a) {
       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
@@ -111,15 +114,15 @@ function ve(a) {
       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();
@@ -128,82 +131,82 @@ function ve(a) {
       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 = re(), o = B(t.contentRef);
-        return typeof o == "function" && R(o, e), n(e, i(u, {
+        var e = ae(), o = B(t.contentRef);
+        return typeof o == "function" && P(o, e), i(e, n(u, {
           get when() {
-            return v();
+            return S();
           },
           get children() {
-            var r = te();
-            return n(r, v), r;
+            var r = oe();
+            return i(r, S), r;
           }
-        }), null), n(e, i(u, {
+        }), null), i(e, n(u, {
           get when() {
-            return D();
+            return h();
           },
           get children() {
-            var r = oe();
-            return n(r, D), r;
+            var r = re();
+            return i(r, h), v(() => _(r, "title", F())), r;
           }
         }), null), e;
-      })(), i(ee, {
-        actionRef: (e) => C = e,
+      })(), n(te, {
+        actionRef: (e) => $ = e,
         classes: {
           child: "tab__ripple-child"
         }
       })];
     }
   }));
-  return i(u, {
+  return n(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, {
+      return i(e, A, null), i(e, n(u, {
         get when() {
-          return y();
+          return w();
         },
         get children() {
-          var o = ae(), r = w;
-          return typeof r == "function" ? R(r, o) : w = o, n(o, h), o;
+          var o = le(), r = k;
+          return typeof r == "function" ? P(r, o) : k = o, i(o, y), o;
         }
-      }), null), n(e, i(u, {
+      }), null), i(e, n(u, {
         get when() {
           return t.closable;
         },
         get children() {
-          var o = le();
-          return o.$$click = (r) => d(r, "button"), o.$$mousedown = (r) => r.preventDefault(), n(o, i(Z, {
+          var o = ie();
+          return o.$$click = (r) => d(r, "button"), o.$$mousedown = (r) => r.preventDefault(), i(o, n(ee, {
             name: "close",
             size: 16
-          })), A((r) => {
-            var b = t.closeLabel, x = !!t.disabled;
-            return b !== r.e && P(o, "aria-label", r.e = b), x !== r.t && (o.disabled = r.t = x), r;
+          })), 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 r = 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 r !== o.e && z(e, o.e = r), 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
@@ -211,8 +214,8 @@ function ve(a) {
     }
   });
 }
-J(["mousedown", "click"]);
+Q(["mousedown", "click"]);
 export {
-  ve as Tab
+  De as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/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":"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"}
+{"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":";;;;;;;;;;;AAkHA,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,GAMlCC,IAAWA,MAA0B;AACzC,UAAMC,IAAOF,EAAAA;AACb,WAAOtB,GAAKyB,WAAW1B,EAAM2B,UAAUC,UAAa,OAAOH,KAAS,YAAYA,MAAS,KAAKA,IAAOG;AAAAA,EACvG,GAGMC,IAA4B;AAAA,IAAET,OAAQzC,CAAAA,MAAUyC,EAAMzC,GAAO,SAAS;AAAA,EAAA,GACtEmD,IAAUR,EAAS,MAAM;AAC7B,UAAMS,IAAQpB,EAAMmB;AACpB,WAAO,OAAOC,KAAU,aAAcA,EAA8CF,CAAU,IAAIE;AAAAA,EACpG,CAAC,GACKC,IAAaA,MAAeF,EAAQG,QAAAA,EAAUC,SAAS;AAE7D,MAAIC,GACAC;AAEJ,QAAMC,IAASA,MAAgBpC,IAAMA,EAAIqC,YAAYxB,EAAAA,IAAUH,EAAMH,UAE/D+B,IAAMA,MAAc5B,EAAM4B,QAAQ5B,EAAM6B,SAASZ,SAAY,MAAM,WAEnEa,IAAQA,MAAexB,EAAQN,EAAMK,YAAauB,QAAU,UAE5DG,IAAgF/D,CAAAA,MAAU;AAC9F,QAAI8D,KAAS;AACX9D,MAAAA,EAAMgE,eAAAA;AACN;AAAA,IACF;AAIA,IAFAC,EAAYjC,EAAM+B,SAAS/D,CAAK,GAE5BgC,EAAAA,EAAM6B,SAASZ,UAAalD,GAAgBC,CAAK,MACrDsB,GAAK4C,SAASlE,GAAOmC,GAAO;AAAA,EAC9B,GAEMM,IAAQA,CAACzC,GAAcmE,MAAiC;AAE5D7C,IAAAA,GAAK8C,QAAQjC,EAAAA,GAASgC,CAAM,GAC5BnC,EAAMqC,UAAUrE,GAAOmE,CAAM;AAAA,EAC/B,GAGMG,IAAqFtE,CAAAA,MAAU;AAEnG,QADAiE,EAAYjC,EAAMsC,WAAWtE,CAAK,GAC9BgC,EAAAA,EAAMK,YAAYrC,EAAMuE,oBAAoBvE,EAAMwE,WAAWxE,EAAMyE;AACvE,UAAIb,EAAAA,MAAU,YAAY5D,EAAM0E,QAAQ;AACtC1E,QAAAA,EAAMgE,eAAAA,GACNhE,EAAMyE,cAAcE,MAAAA;AAAAA,eACX3C,EAAMO,aAAavC,EAAM0E,QAAQ,YAAY1E,EAAM0E,QAAQ,gBAAgB,CAACpE,GAAYN,CAAK;AACtGA,QAAAA,EAAMgE,eAAAA,GACNvB,EAAMzC,GAAO,KAAK;AAAA,eACTqD,QAAiBrD,EAAM0E,QAAQ,iBAAkB1E,EAAM0E,QAAQ,SAAS1E,EAAMI,WAAY;AAGnG,cAAMM,IAAU+C,GAAWxC,cAA2BV,EAAe;AACrE,QAAIG,MACFV,EAAMgE,eAAAA,GACNtD,EAAQQ,MAAAA,GAEJR,EAAQE,aAAa,eAAe,MAAM,UAC5CF,EAAQiE,MAAAA,GAEVlE,GAAaC,CAAO;AAAA,MAExB;AAAA;AAAA,EACF,GAEMkE,IAAwF5E,CAAAA,MAAU;AACtGiE,IAAAA,EAAYjC,EAAM4C,eAAe5E,CAAK,GACtCwD,GAAeqB,SAAS7E,CAAK;AAAA,EAC/B,GAKM8E,IAAoF9E,CAAAA,MAAU;AAClGiE,IAAAA,EAAYjC,EAAM8C,aAAa9E,CAAK,GAChCA,EAAMC,WAAW,KAAK+B,EAAMO,YAAY,CAACP,EAAMK,aACjDrC,EAAMgE,eAAAA,GACNvB,EAAMzC,GAAO,aAAa;AAAA,EAE9B,GAGM+E,IAAUA,MAAgBzD,IAAMA,EAAIyD,QAAQ5C,GAAO,IAAKH,EAAM+C,WAAWrB,EAAAA,GAKzEsB,IAAeA,MACnB,CACE3D,EAAM,mBAAmB,GACzB,CAACW,EAAMK,YAAYL,EAAMO,WAAW,qBAAqBU,QACzD,CAACjB,EAAMK,YAAYgB,MAAe,0BAA0BJ,QAC5D,CAACjB,EAAMK,YAAYL,EAAMO,WAAW,qBAAqBU,QACxDjB,EAAMK,WAAyEY,SAA9D,2DAAuE,EAExFgC,OAAO3C,OAAO,EACd4C,KAAK,GAAG,KAAKjC,QAGZkC,IAAUA,MAAenD,EAAMO,aAAaU,UAAaE,QAAcF,QAKvEmC,IAAYA,MAChB9D,GAAK+D,YAAAA,KAAiB,CAACrD,EAAMK,YAAYhB,EAAM,eAAe,MAAM,MAAQA,EAAM,eAAe,MAAM,SACnG,KACA4B,QAEAqC,IAAYA,MAAeC,EAC9BC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAE9B,EAAAA;AAAAA,IAAK;AAAA,EAAA,GACZ3B,GAAI;AAAA,IAAA0D,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAU9D,EAAM2D,KAAKlE,CAAO;AAAC,aAAAoE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAC3BG,EAAG,YAAY/D,EAAMgE,OAAO;AAAA,QACjC,oBAAoBtC,EAAAA;AAAAA,QACpB,qBAAqB1B,EAAMF;AAAAA,QAC3B,sBAAsBE,EAAMK;AAAAA,MAAAA,CAC7B;AAAA,IAAC;AAAA,IAAA,IACF1B,KAAE;AAAA,aAAEqB,EAAMrB,MAAMW,GAAK2E,MAAM9D,GAAO;AAAA,IAAC;AAAA,IAAA,IAAA,kBAAA;AAAA,aACpBH,EAAM,eAAe,MAAMV,GAAK4E,UAAAA,IAAc5E,EAAI6E,QAAQhE,GAAO,IAAIc;AAAAA,IAAU;AAAA,IAAA,IAE9FY,OAAI;AAAA,aAAEuC,EAAA,MAAA,CAAA,CAAAtC,GAAO,MAAGb,SAAYjB,EAAM6B;AAAAA,IAAI;AAAA,IAAA,IACtCuB,YAAS;AAAA,aAAEgB,EAAA,MAAA,CAAA,CAAAjB,GAAS,EAAA,IAAGlC,SAAYmC,EAAAA;AAAAA,IAAW;AAAA,IAC9CrB,SAAAA;AAAAA,IACAO,WAAAA;AAAAA,IACAM,eAAAA;AAAAA,IACAE,aAAAA;AAAAA,IAIAuB,MAAI;AAAA,IAAA,IAAA,kBAAA;AAAA,aACW3C,EAAAA;AAAAA,IAAQ;AAAA,IAAA,IAAA,kBAAA;AAAA,aACR1B,EAAMK,YAAYY;AAAAA,IAAS;AAAA,IAAA,IAAA,sBAAA;AAAA,aACvB+B,EAAAA;AAAAA,IAAc;AAAA,IAAA,IACjCsB,WAAQ;AAAA,aAAEvB,EAAAA,IAAY,IAAI;AAAA,IAAE;AAAA,IAAA,IAC5B1C,WAAQ;AAAA,aAAE+D,EAAA,MAAAxC,EAAAA,MAAU,QAAQ,MAAG5B,EAAMK,WAAWY;AAAAA,IAAS;AAAA,IAAA,IAAAN,WAAA;AAAA,aAAA,EAAA,MAAA;AAAA,YAAA4D,IAAAC,GAAAA,GAAAC,IAEpBX,EAAU9D,EAAM0E,UAAU;AAAC,sBAAAD,KAAA,cAAAE,EAAAF,GAAAF,CAAA,GAAAK,EAAAL,GAAAhB,EAC7DsB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEpE,EAAAA;AAAAA,UAAM;AAAA,UAAA,IAAAC,WAAA;AAAA,gBAAAoE,IAAAC,GAAAA;AAAAJ,mBAAAA,EAAAG,GAEbrE,CAAI,GAAAqE;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAH,EAAAL,GAAAhB,EAGRsB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAElE,EAAAA;AAAAA,UAAO;AAAA,UAAA,IAAAD,WAAA;AAAA,gBAAAsE,IAAAC,GAAAA;AAAAN,mBAAAA,EAAAK,GAEdrE,CAAK,GAAAuE,QAAAC,EAAAH,GAAA,SADkCpE,EAAAA,CAAU,CAAA,GAAAoE;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAV;AAAAA,MAAA,GAAA,GAAAhB,EAKvD8B,IAAM;AAAA,QAACC,WAAYC,OAAS/D,IAAgB+D;AAAAA,QAAMC,SAAS;AAAA,UAAEC,OAAO;AAAA,QAAA;AAAA,MAAoB,CAAC,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAI9F,SAAAlC,EACGsB,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAE3B,EAAAA;AAAAA,IAAS;AAAA,IAAA,IAAEuC,WAAQ;AAAA,aAAEpC,EAAAA;AAAAA,IAAW;AAAA,IAAA,IAAA3C,WAAA;AAAA,UAAAgF,IAAAC,GAAAA;AAAAhB,aAAAA,EAAAe,GAQvCrC,GAAS,IAAA,GAAAsB,EAAAe,GAAApC,EACTsB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEzD,EAAAA;AAAAA,QAAY;AAAA,QAAA,IAAAV,WAAA;AAAA,cAAAkF,IAAAC,GAAAA,GAAAC,IACetE;AAAS,wBAAAsE,KAAA,aAAApB,EAAAoB,GAAAF,CAAA,IAATpE,IAASoE,GAAAjB,EAAAiB,GAC3C1E,CAAO,GAAA0E;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAjB,EAAAe,GAAApC,EAGXsB,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE9E,EAAMO;AAAAA,QAAQ;AAAA,QAAA,IAAAI,WAAA;AAAA,cAAAqF,IAAAC,GAAAA;AAAAD,iBAAAA,EAAAE,UAUZlI,CAAAA,MAAUyC,EAAMzC,GAAO,QAAQ,GAACgI,EAAAG,cAD5BnI,CAAAA,MAAUA,EAAMgE,eAAAA,GAAgB4C,EAAAoB,GAAAzC,EAG7C6C,IAAI;AAAA,YAACC,MAAI;AAAA,YAASC,MAAM;AAAA,UAAA,CAAE,CAAA,GAAAnB,EAAAoB,CAAAA,MAAA;AAAA,gBAAAC,IANfxG,EAAMD,YAAU0G,IAClBnG,EAAQN,EAAMK;AAASmG,mBAAAA,MAAAD,EAAAG,KAAAtB,EAAAY,GAAA,cAAAO,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAI,MAAAX,EAAA3F,WAAAkG,EAAAI,IAAAF,IAAAF;AAAAA,UAAA,GAAA;AAAA,YAAAG,GAAAzF;AAAAA,YAAA0F,GAAA1F;AAAAA,UAAAA,CAAA,GAAA+E;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAb,EAAAoB,CAAAA,MAAA;AAAA,YAAAK,IAnB9B7C,EAAG,iBAAiB;AAAA,UACzB,yBAAyBrC,EAAAA;AAAAA,UACzB,2BAA2B1B,EAAMK;AAAAA,QAAAA,CAClC,GAACwG,IACSzD,EAAAA;AAAWwD,eAAAA,MAAAL,EAAAG,KAAAI,EAAAnB,GAAAY,EAAAG,IAAAE,CAAA,GAAAC,MAAAN,EAAAI,KAAAvB,EAAAO,GAAA,aAAAY,EAAAI,IAAAE,CAAA,GAAAN;AAAAA,MAAA,GAAA;AAAA,QAAAG,GAAAzF;AAAAA,QAAA0F,GAAA1F;AAAAA,MAAAA,CAAA,GAAA0E;AAAAA,IAAA;AAAA,EAAA,CAAA;AA0B9B;AAEmBoB,EAAA,CAAA,aAAA,OAAA,CAAA;"}

package/dist/components/navigation/tabs/tabs.d.ts

@@ -92,8 +92,22 @@ export interface TabsProps {
     overflowMenu?: boolean;
     /** Accessible label of the overflow-menu trigger. English by default; set it to localise. */
     overflowMenuAriaLabel?: string;
-    /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */
+    /**
+     * Compact tabs: a shorter row — `--smui-tabDenseHeight` (36px) — with labels as written (no
+     * capitals, no letter spacing) and less padding.
+     */
     dense?: boolean;
+    /**
+     * Content-width tabs: each tab is as wide as what it holds (marker, label, close button) and the
+     * row does not stretch them, so what is left of the row stays empty; a plain row shares its whole
+     * width between its tabs. A tab stays between `--smui-tabFitMinWidth` (80px) and
+     * `--smui-tabFitMaxWidth` (256px), set in the theme; a longer label is cut with an ellipsis, and a
+     * string `label` is also the label's `title`, so the full text shows on hover (a `Tab` whose label
+     * is not a string takes a `title` of its own, which is the tooltip of the whole tab). The indicator, `scrollable`, `scrollButtons`, the
+     * overflow menu and the close button need nothing more. Dropping a dragged tab on the row's empty
+     * part does nothing.
+     */
+    fit?: boolean;
     /** Accessible label of the button that scrolls back. */
     scrollBackAriaLabel?: string;
     /** Accessible label of the button that scrolls forward. */