@leavepulse/ui 0.20.7 → 0.20.8

package/dist/chunks/{LpTabs-D7aTVPOb.js → LpTabs-Cefe_lys.js}

@@ -25,6 +25,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function pillUnder(value, active) {
       return hovered.value ? hovered.value === value : active === value;
     }
+    function releaseFocusAfterPointer(event) {
+      const target = event.currentTarget;
+      if (target instanceof HTMLElement) target.blur();
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsRoot), {
         "model-value": __props.modelValue,
@@ -50,7 +54,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",
                     hovered.value === item.value ? "text-ink" : "text-muted"
                   ]]),
-                  onPointerenter: ($event) => hovered.value = item.value
+                  onPointerenter: ($event) => hovered.value = item.value,
+                  onPointerup: releaseFocusAfterPointer
                 }, {
                   default: withCtx(() => [
                     pillUnder(item.value, __props.modelValue) ? (openBlock(), createBlock(unref(Motion), {

package/dist/components/LpTabs.vue.d.ts

@@ -20,13 +20,13 @@ type __VLS_Props = {
     /** Stretch the bar to full width with equal-share triggers. */
     block?: boolean;
 };
-declare var __VLS_48: {
+declare var __VLS_49: {
     value: string;
-}, __VLS_50: {};
+}, __VLS_51: {};
 type __VLS_Slots = {} & {
-    panel?: (props: typeof __VLS_48) => any;
+    panel?: (props: typeof __VLS_49) => any;
 } & {
-    default?: (props: typeof __VLS_50) => any;
+    default?: (props: typeof __VLS_51) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/dist/components/LpTabs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTabs-D7aTVPOb.js";
+import { _ as _sfc_main } from "../chunks/LpTabs-Cefe_lys.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -56,7 +56,7 @@ import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
 import { _ as _52 } from "./chunks/LpTable-pZmjnEti.js";
 import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _54 } from "./chunks/LpTabs-D7aTVPOb.js";
+import { _ as _54 } from "./chunks/LpTabs-Cefe_lys.js";
 import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
 import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.20.7",
+  "version": "0.20.8",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpTabs.vue

@@ -57,6 +57,25 @@ const panelLayoutTransition = computed(() =>
 function pillUnder(value: string, active?: string): boolean {
   return hovered.value ? hovered.value === value : active === value
 }
+
+/*
+ * Drop focus after a mouse pick.
+ *
+ * Tabs implement the ARIA roving-focus pattern: while a trigger holds focus,
+ * ←/→ move between tabs. That is correct for keyboard users, but a *click*
+ * also leaves focus on the trigger — so afterwards the arrow keys silently
+ * belong to the tab strip, and any arrow-key handling the surrounding app has
+ * (walking a grid, moving a selection) appears to be broken until the user
+ * clicks somewhere else.
+ *
+ * Blurring on pointerup restores the arrows to the page without touching the
+ * keyboard path: Tab/←/→ navigation still focuses triggers and still works,
+ * because those never fire a pointer event.
+ */
+function releaseFocusAfterPointer(event: PointerEvent) {
+  const target = event.currentTarget
+  if (target instanceof HTMLElement) target.blur()
+}
 </script>
 
 <template>
@@ -85,6 +104,7 @@ function pillUnder(value: string, active?: string): boolean {
           hovered === item.value ? 'text-ink' : 'text-muted',
         ]"
         @pointerenter="hovered = item.value"
+        @pointerup="releaseFocusAfterPointer"
       >
         <!-- Active marker: a bottom bar in "underline", a filled pill otherwise.
              Both slide between tabs via the shared motion layoutId. -->