@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1,20 +1,22 @@
-import { createComponent as i, insert as a, template as o, use as B, spread as D, mergeProps as F, memo as y, addEventListener as L, effect as I, className as N, setAttribute as d, delegateEvents as O } from "solid-js/web";
+import { createComponent as i, insert as a, template as o, use as B, spread as F, mergeProps as I, memo as y, effect as K, className as N, setAttribute as d, delegateEvents as O } from "solid-js/web";
 import { mergeProps as R, splitProps as U, createMemo as X, Show as c, For as j } from "solid-js";
 import P from "clsx";
 import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
 import { Icon as G } from "../../base/icon/icon.js";
-var H = /* @__PURE__ */ o("<div>"), J = /* @__PURE__ */ o("<span class=smwb-stepper__optional>"), K = /* @__PURE__ */ o("<span class=smwb-stepper__description>"), Q = /* @__PURE__ */ o("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), V = /* @__PURE__ */ o("<div class=smwb-stepper__connector aria-hidden=true>"), W = /* @__PURE__ */ o("<span>"), Y = /* @__PURE__ */ o("<div class=smwb-stepper-auto>");
-const Z = 12;
-function ae(E) {
+var H = /* @__PURE__ */ o("<div>"), J = /* @__PURE__ */ o("<span class=smwb-stepper__optional>"), Q = /* @__PURE__ */ o("<span class=smwb-stepper__description>"), V = /* @__PURE__ */ o("<div><div class=smwb-stepper__icon aria-hidden=true></div><div class=smwb-stepper__text><span class=smwb-stepper__label>"), W = /* @__PURE__ */ o("<div class=smwb-stepper__connector aria-hidden=true>"), Y = /* @__PURE__ */ o("<span>"), Z = /* @__PURE__ */ o("<div class=smwb-stepper-auto>");
+const x = 12;
+function ne(L) {
   const z = R({
     orientation: "horizontal",
     alternativeLabel: !1
-  }, E), [t, A] = U(z, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref"]), m = X(() => t.steps), _ = () => t.orientation === "auto", u = () => (() => {
+  }, L), [t, A] = U(z, ["class", "steps", "activeStep", "orientation", "alternativeLabel", "onStepClick", "ref", "data-testid"]), m = X(() => t.steps), _ = () => t.orientation === "auto", u = () => (() => {
     var n = H(), b = q(t.ref);
-    return typeof b == "function" && B(b, n), D(n, F(A, {
-      "data-testid": "stepper",
+    return typeof b == "function" && B(b, n), F(n, I(A, {
+      get "data-testid"() {
+        return t["data-testid"] ?? "stepper";
+      },
       get "data-steps"() {
-        return y(() => !!_())() ? String(Math.min(m().length, Z)) : void 0;
+        return y(() => !!_())() ? String(Math.min(m().length, x)) : void 0;
       },
       get class() {
         return P("smwb-stepper", _() ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${t.orientation}`, {
@@ -25,66 +27,68 @@ function ae(E) {
       get each() {
         return m();
       },
-      children: (r, l) => {
-        const w = () => l() < t.activeStep, g = () => l() === t.activeStep, M = () => l() === m().length - 1, p = () => !!t.onStepClick && !r.disabled;
+      children: (s, l) => {
+        const w = () => l() < t.activeStep, g = () => l() === t.activeStep, E = () => l() === m().length - 1, p = () => !!t.onStepClick && !s.disabled, M = () => {
+          p() && t.onStepClick?.(l());
+        }, D = (r) => {
+          p() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), t.onStepClick?.(l()));
+        };
         return [(() => {
-          var s = Q(), h = s.firstChild, v = h.nextSibling, T = v.firstChild;
-          return L(s, "keydown", p() ? (e) => {
-            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStepClick?.(l()));
-          } : void 0, !0), L(s, "click", p() ? () => t.onStepClick?.(l()) : void 0, !0), a(h, i(c, {
+          var r = V(), f = r.firstChild, v = f.nextSibling, T = v.firstChild;
+          return r.$$keydown = D, r.$$click = M, a(f, i(c, {
             get when() {
-              return r.icon;
+              return s.icon;
             },
             get fallback() {
               return y(() => !!w())() ? i(G, {
                 name: "check",
                 size: 16
               }) : (() => {
-                var e = W();
+                var e = Y();
                 return a(e, () => l() + 1), e;
               })();
             },
             get children() {
-              return r.icon;
+              return s.icon;
             }
-          })), a(T, () => r.label), a(v, i(c, {
+          })), a(T, () => s.label), a(v, i(c, {
             get when() {
-              return r.optional;
+              return s.optional;
             },
             get children() {
               var e = J();
-              return a(e, () => r.optional), e;
+              return a(e, () => s.optional), e;
             }
           }), null), a(v, i(c, {
             get when() {
-              return r.description;
+              return s.description;
             },
             get children() {
-              var e = K();
-              return a(e, () => r.description), e;
+              var e = Q();
+              return a(e, () => s.description), e;
             }
-          }), null), I((e) => {
-            var f = P("smwb-stepper__step", {
+          }), null), K((e) => {
+            var h = P("smwb-stepper__step", {
               "smwb-stepper__step_active": g(),
               "smwb-stepper__step_completed": w(),
-              "smwb-stepper__step_error": r.error,
-              "smwb-stepper__step_disabled": r.disabled,
+              "smwb-stepper__step_error": s.error,
+              "smwb-stepper__step_disabled": s.disabled,
               "smwb-stepper__step_clickable": p()
-            }), k = g() ? "step" : void 0, $ = r.disabled || void 0, S = p() ? "button" : void 0, C = p() ? 0 : void 0;
-            return f !== e.e && N(s, e.e = f), k !== e.t && d(s, "aria-current", e.t = k), $ !== e.a && d(s, "aria-disabled", e.a = $), S !== e.o && d(s, "role", e.o = S), C !== e.i && d(s, "tabindex", e.i = C), e;
+            }), $ = g() ? "step" : void 0, k = s.disabled || void 0, S = p() ? "button" : void 0, C = p() ? 0 : void 0;
+            return h !== e.e && N(r, e.e = h), $ !== e.t && d(r, "aria-current", e.t = $), k !== e.a && d(r, "aria-disabled", e.a = k), S !== e.o && d(r, "role", e.o = S), C !== e.i && d(r, "tabindex", e.i = C), e;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0,
             i: void 0
-          }), s;
+          }), r;
         })(), i(c, {
           get when() {
-            return !M();
+            return !E();
           },
           get children() {
-            return V();
+            return W();
           }
         })];
       }
@@ -98,13 +102,13 @@ function ae(E) {
       return u();
     },
     get children() {
-      var n = Y();
+      var n = Z();
       return a(n, u), n;
     }
   });
 }
 O(["click", "keydown"]);
 export {
-  ae as Stepper
+  ne as Stepper
 };
 //# sourceMappingURL=stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  /** Longer text under the label, in every orientation. */\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as StepperOrientation, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  // Read the steps once. An inline array is re-evaluated on every read, creating\n  // the markup in it (icons, labels, descriptions) again; during hydration a copy\n  // that is not the rendered one has no server DOM node to adopt.\n  const steps = createMemo(() => local.steps);\n  const auto = (): boolean => local.orientation === \"auto\";\n\n  const stepper = (): JSX.Element => (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : undefined}\n      class={cn(\n        \"smwb-stepper\",\n        auto() ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation !== \"vertical\" },\n        local.class\n      )}\n    >\n      <For each={steps()}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === steps().length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return (\n    <Show when={auto()} fallback={stepper()}>\n      <div class=\"smwb-stepper-auto\">{stepper()}</div>\n    </Show>\n  );\n}\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","steps","createMemo","auto","stepper","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","_$memo","String","Math","min","length","undefined","cn","class","_$insert","_$createComponent","For","each","children","step","index","completed","activeStep","active","isLast","clickable","Boolean","onStepClick","disabled","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","_$addEventListener","event","key","preventDefault","Show","when","icon","fallback","Icon","name","size","_el$9","_tmpl$6","label","optional","_el$6","_tmpl$2","description","_el$7","_tmpl$3","_$effect","_p$","_v$","error","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setAttribute","a","o","i","_tmpl$5","_el$0","_tmpl$7","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"stepper.js","sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  /** Longer text under the label, in every orientation. */\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  /** Test id of the stepper `<div>`; `stepper` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as StepperOrientation, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the steps once. An inline array is re-evaluated on every read, creating\n  // the markup in it (icons, labels, descriptions) again; during hydration a copy\n  // that is not the rendered one has no server DOM node to adopt.\n  const steps = createMemo(() => local.steps);\n  const auto = (): boolean => local.orientation === \"auto\";\n\n  const stepper = (): JSX.Element => (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"stepper\"}\n      data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : undefined}\n      class={cn(\n        \"smwb-stepper\",\n        auto() ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation !== \"vertical\" },\n        local.class\n      )}\n    >\n      <For each={steps()}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === steps().length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          // Solid binds event handlers once, so both are always attached and\n          // check `clickable()` themselves: a step can turn clickable, or stop,\n          // after it renders.\n          const onClick = (): void => {\n            if (clickable()) local.onStepClick?.(index());\n          };\n          const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n            if (clickable() && (event.key === \"Enter\" || event.key === \" \")) {\n              event.preventDefault();\n              local.onStepClick?.(index());\n            }\n          };\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={onClick}\n                onKeyDown={onKeyDown}\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return (\n    <Show when={auto()} fallback={stepper()}>\n      <div class=\"smwb-stepper-auto\">{stepper()}</div>\n    </Show>\n  );\n}\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","props","merged","mergeProps","orientation","alternativeLabel","local","rest","splitProps","steps","createMemo","auto","stepper","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","_$memo","String","Math","min","length","undefined","cn","class","_$insert","_$createComponent","For","each","children","step","index","completed","activeStep","active","isLast","clickable","Boolean","onStepClick","disabled","onClick","onKeyDown","event","key","preventDefault","_el$2","_tmpl$4","_el$3","firstChild","_el$4","nextSibling","_el$5","$$keydown","$$click","Show","when","icon","fallback","Icon","name","size","_el$9","_tmpl$6","label","optional","_el$6","_tmpl$2","description","_el$7","_tmpl$3","_$effect","_p$","_v$","error","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setAttribute","a","o","i","_tmpl$5","_el$0","_tmpl$7","_$delegateEvents"],"mappings":"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"}

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

@@ -1,85 +1,216 @@
-import { createComponent as o, Dynamic as C, mergeProps as k, use as R, insert as a, memo as x, template as c } from "solid-js/web";
-import { mergeProps as P, splitProps as A, children as f, Show as u } from "solid-js";
-import y from "clsx";
-import { useTabsContext as T } from "../tabsContext.js";
-import { mergeRefs as g } from "../../../../primitives/mergeRefs.js";
-import { callHandler as D } from "../../../../primitives/callHandler.js";
-import { Ripple as H } from "../../../base/ripple/ripple.js";
-var S = /* @__PURE__ */ c("<span class=smwb-tab__icon>"), j = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), q = /* @__PURE__ */ c("<span class=smwb-tab__content>");
-function K(_) {
-  const n = T(), i = n ? n.registerTab() : -1, v = P({
+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 { 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;
+    if (f) {
+      f.focus({
+        preventScroll: !0
+      });
+      return;
+    }
+  }
+};
+function ke(r) {
+  const l = Y(), [f, I] = Q(), E = V({
     isActive: !1,
-    stacked: !1
-  }, _), [t, w] = A(v, ["class", "label", "isActive", "contentRef", "icon", "stacked", "tag", "disabled", "onClick", "ref"]), m = f(() => t.icon), b = f(() => t.label);
-  let d;
-  const l = () => n ? n.value() === i : t.isActive, h = (e) => {
-    n ? n.onChange(e, i) : D(t.onClick, e);
-  }, $ = (e) => {
-    d?.onRipple(e);
-  }, p = () => t.tag ?? "button";
-  return o(C, k({
+    stacked: !1,
+    closeLabel: "Close tab"
+  }, r), [t, q] = X(E, [
+    "class",
+    "label",
+    "isActive",
+    "contentRef",
+    "icon",
+    "stacked",
+    "tag",
+    "href",
+    "tabStop",
+    "disabled",
+    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value
+    // is dropped, as in the React `Tab`.
+    "draggable",
+    "closable",
+    "onClose",
+    "closeLabel",
+    "actions",
+    "id",
+    "aria-controls",
+    // A tab opens in place: a caller's target is dropped, not passed on.
+    "target",
+    "onClick",
+    "onKeyDown",
+    "ref",
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown",
+    "onMouseDown"
+  ]), s = l ? l.registerTab(f, {
+    id: () => t.id,
+    disabled: () => !!t.disabled || r["aria-disabled"] === !0 || r["aria-disabled"] === "true",
+    closable: () => !!t.closable,
+    requestClose: (e) => d(e, "key")
+  }) : () => -1, v = _(() => t.icon), D = _(() => t.label), F = {
+    close: (e) => d(e, "actions")
+  }, h = _(() => {
+    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()) {
+      e.preventDefault();
+      return;
+    }
+    p(t.onClick, e), !(t.href !== void 0 && ie(e)) && l?.onChange(e, s());
+  }, d = (e, o) => {
+    l?.closing(s(), o), t.onClose?.(e, o);
+  }, N = (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))
+        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));
+      }
+    }
+  }, G = (e) => {
+    p(t.onPointerDown, e), C?.onRipple(e);
+  }, O = (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({
     get component() {
-      return p();
+      return g();
     }
-  }, w, {
+  }, q, {
     ref(e) {
-      var s = g(t.ref);
-      typeof s == "function" && s(e);
+      var o = B(t.ref, I);
+      typeof o == "function" && o(e);
     },
     get class() {
-      return y("smwb-tab", t.class, {
-        "smwb-tab--active": l(),
+      return T("smwb-tab", t.class, {
+        "smwb-tab--active": m(),
         "smwb-tab--stacked": t.stacked,
         "smwb-tab--disabled": t.disabled
       });
     },
-    onClick: h,
-    onPointerDown: $,
+    get id() {
+      return t.id ?? l?.tabId(s());
+    },
+    get "aria-controls"() {
+      return t["aria-controls"] ?? (l?.hasPanels() ? l.panelId(s()) : void 0);
+    },
+    get href() {
+      return k(() => !!S())() ? void 0 : t.href;
+    },
+    get draggable() {
+      return k(() => !!$())() ? void 0 : K();
+    },
+    onClick: L,
+    onKeyDown: N,
+    onPointerDown: G,
+    onMouseDown: O,
     role: "tab",
     get "aria-selected"() {
-      return l();
+      return m();
     },
     get "aria-disabled"() {
       return t.disabled || void 0;
     },
+    get "aria-keyshortcuts"() {
+      return j();
+    },
     get tabindex() {
-      return l() ? 0 : -1;
+      return W() ? 0 : -1;
     },
     get disabled() {
-      return x(() => p() === "button")() ? t.disabled : void 0;
+      return k(() => g() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
-        var e = q(), s = g(t.contentRef, (r) => {
-          n?.indicatorContent && n.setContentRef(i, r);
-        });
-        return typeof s == "function" && R(s, e), a(e, o(u, {
+        var e = ae(), o = B(t.contentRef);
+        return typeof o == "function" && R(o, e), n(e, i(u, {
           get when() {
-            return m();
+            return v();
           },
           get children() {
-            var r = S();
-            return a(r, m), r;
+            var a = te();
+            return n(a, v), a;
           }
-        }), null), a(e, o(u, {
+        }), null), n(e, i(u, {
           get when() {
-            return b();
+            return D();
           },
           get children() {
-            var r = j();
-            return a(r, b), r;
+            var a = oe();
+            return n(a, D), a;
           }
         }), null), e;
-      })(), o(H, {
-        actionRef: (e) => d = e,
+      })(), i(ee, {
+        actionRef: (e) => C = e,
         classes: {
           child: "tab__ripple-child"
         }
       })];
     }
   }));
+  return i(u, {
+    get when() {
+      return $();
+    },
+    get fallback() {
+      return M();
+    },
+    get children() {
+      var e = ne();
+      return n(e, M, null), n(e, i(u, {
+        get when() {
+          return y();
+        },
+        get children() {
+          var o = re(), a = w;
+          return typeof a == "function" ? R(a, o) : w = o, n(o, h), 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, {
+            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;
+          }, {
+            e: void 0,
+            t: void 0
+          }), o;
+        }
+      }), null), A((o) => {
+        var a = T("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;
+      }, {
+        e: void 0,
+        t: void 0
+      }), e;
+    }
+  });
 }
+J(["mousedown", "click"]);
 export {
-  K as Tab
+  ke 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, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\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\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\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      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\">{icon()}</span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"names":["Tab","props","ctx","useTabsContext","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","icon","children","label","rippleActions","active","value","onClick","event","onChange","callHandler","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","_el$","_tmpl$3","_ref$2","contentRef","el","indicatorContent","setContentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"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  // 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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"}

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

@@ -0,0 +1,32 @@
+import { spread as s, mergeProps as i, insert as o, template as d } from "solid-js/web";
+import { splitProps as p, mergeProps as m } from "solid-js";
+import c from "clsx";
+import { useTabsContext as u } from "../tabsContext.js";
+var b = /* @__PURE__ */ d("<div>");
+function h(a) {
+  const r = u(), [e, l] = p(a, ["index", "class", "children"]), n = m({
+    get id() {
+      return r?.panelId(e.index);
+    },
+    get "aria-labelledby"() {
+      return r?.tabId(e.index);
+    },
+    tabindex: 0
+  }, l);
+  return (() => {
+    var t = b();
+    return s(t, i(n, {
+      get class() {
+        return c("smwb-tab-panel", e.class);
+      },
+      role: "tabpanel",
+      get hidden() {
+        return r ? r.value() !== e.index : n.hidden;
+      }
+    }), !1, !0), o(t, () => e.children), t;
+  })();
+}
+export {
+  h as TabPanel
+};
+//# sourceMappingURL=tabPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabPanel.js","sources":["../../../../../../src/components/navigation/tabs/tabPanel/tabPanel.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useTabsContext } from \"../tabsContext\";\n\nexport interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\n   * shows while that tab is selected and is hidden otherwise.\n   */\n  index: number;\n  /** Extra class on the panel. */\n  class?: string;\n  /** The panel's content. It stays in the document while the panel is hidden. */\n  children?: JSX.Element;\n}\n\n/**\n * The content of one tab. Give it to the `panels` of `Tabs`, which links it to its tab: the panel\n * is `aria-labelledby` the tab and the tab `aria-controls` the panel. A panel is `role=\"tabpanel\"`\n * and a tab stop of its own (`tabindex=\"0\"`), so Tab moves from the tab list to the panel. A panel\n * placed anywhere else is not linked to any tabs and is always shown (its `hidden` is yours).\n */\nexport function TabPanel(props: ParentProps<TabPanelProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [local, rest] = splitProps(props, [\"index\", \"class\", \"children\"]);\n  // Yours win: a TabPanel outside Tabs `panels` has no ids to give, and a caller's\n  // `id`, `aria-labelledby` or `tabindex` replaces the linked ones.\n  const linked = mergeProps(\n    {\n      get id() {\n        return ctx?.panelId(local.index);\n      },\n      get \"aria-labelledby\"() {\n        return ctx?.tabId(local.index);\n      },\n      tabindex: 0,\n    },\n    rest\n  );\n\n  return (\n    <div {...linked} class={cn(\"smwb-tab-panel\", local.class)} role=\"tabpanel\" hidden={ctx ? ctx.value() !== local.index : linked.hidden}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default TabPanel;\n"],"names":["TabPanel","props","ctx","useTabsContext","local","rest","splitProps","linked","mergeProps","id","panelId","index","tabId","tabindex","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","hidden","value","_$insert","children"],"mappings":";;;;;AAsBO,SAASA,EAASC,GAAgD;AACvE,QAAMC,IAAMC,EAAAA,GACN,CAACC,GAAOC,CAAI,IAAIC,EAAWL,GAAO,CAAC,SAAS,SAAS,UAAU,CAAC,GAGhEM,IAASC,EACb;AAAA,IACE,IAAIC,KAAK;AACP,aAAOP,GAAKQ,QAAQN,EAAMO,KAAK;AAAA,IACjC;AAAA,IACA,IAAI,oBAAoB;AACtB,aAAOT,GAAKU,MAAMR,EAAMO,KAAK;AAAA,IAC/B;AAAA,IACAE,UAAU;AAAA,EAAA,GAEZR,CACF;AAEA,UAAA,MAAA;AAAA,QAAAS,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWV,GAAM;AAAA,MAAA,IAAA,QAAA;AAAA,eAASW,EAAG,kBAAkBd,EAAMe,KAAK;AAAA,MAAC;AAAA,MAAA,MAAO;AAAA,MAAU,IAACC,SAAM;AAAA,eAAElB,IAAMA,EAAImB,MAAAA,MAAYjB,EAAMO,QAAQJ,EAAOa;AAAAA,MAAM;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAE,EAAAR,GAAA,MACjIV,EAAMmB,QAAQ,GAAAT;AAAAA,EAAA,GAAA;AAGrB;"}