@leavepulse/ui 0.94.0 → 0.94.1

package/dist/assets/LpTabs-7yQjX2ih.css

@@ -0,0 +1,18 @@
+
+.lp-tab-badge-enter-active[data-v-60b1eda3],
+.lp-tab-badge-leave-active[data-v-60b1eda3] {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+.lp-tab-badge-enter-from[data-v-60b1eda3],
+.lp-tab-badge-leave-to[data-v-60b1eda3] {
+  opacity: 0;
+  transform: scale(0.6);
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-tab-badge-enter-active[data-v-60b1eda3],
+  .lp-tab-badge-leave-active[data-v-60b1eda3] {
+    transition: none;
+}
+}

package/dist/chunks/{LpAppShell-xEBmGV78.js → LpAppShell-DlpQierx.js}

@@ -14,7 +14,7 @@ import { _ as _sfc_main$4 } from "./LpIcon-CxHFPwKt.js";
 import { _ as _sfc_main$8 } from "./LpPageScrollbar-C9sTeU-2.js";
 import { _ as _sfc_main$7 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$5 } from "./LpShift-DAgS_d2x.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-BIhusppV.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-BKhVDsMt.js";
 import { mergeClass, useMergedAttrs } from "../composables/useMergedClass.js";
 import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 const _hoisted_1 = ["href"];

package/dist/chunks/{LpModalNav-DVXAF-DG.js → LpModalNav-BFjiHWbr.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$2 } from "./LpButton-BvVoF-PO.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CxHFPwKt.js";
 import { MODAL_MAX_HEIGHT } from "../components/modalDepth.js";
 import { _ as _sfc_main$1 } from "./LpModal-D1E7rQzw.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-BIhusppV.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-BKhVDsMt.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpSidebar-BIhusppV.js → LpSidebar-BKhVDsMt.js}

@@ -8,7 +8,7 @@ import { _ as _sfc_main$5 } from "./LpDrawer-BkWjFdV0.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CxHFPwKt.js";
 import { _ as _sfc_main$3 } from "./LpInput-DGMpxrcg.js";
 import { _ as _sfc_main$1 } from "./LpTooltip-BKde8Xjv.js";
-import { _ as _sfc_main$4 } from "./LpSidebarNav-CFcI7--7.js";
+import { _ as _sfc_main$4 } from "./LpSidebarNav-DbCap8z1.js";
 const _hoisted_1 = ["data-compact", "aria-label"];
 const _hoisted_2 = {
   key: 0,
@@ -55,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     search: {},
     loading: { type: Boolean },
     skeletonRows: { default: 6 },
-    skeletonHeader: { type: Boolean, default: true },
+    skeletonHeader: { type: Boolean, default: false },
     responsive: { type: Boolean, default: false },
     open: { type: Boolean },
     mobileBreakpoint: { default: "md" },

package/dist/chunks/{LpSidebarNav-CFcI7--7.js → LpSidebarNav-DbCap8z1.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unref, withCtx, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, toDisplayString, createVNode, normalizeClass, createTextVNode, createSlots, renderSlot } from "vue";
+import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unref, withCtx, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString, createVNode, normalizeClass, createTextVNode, createSlots, renderSlot } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { _ as _sfc_main$5 } from "./LpBadge-Bh5roBr_.js";
 import "../components/commandSearch.js";
@@ -17,25 +17,30 @@ const _hoisted_1 = {
   key: 0,
   class: "flex items-center gap-3 px-1"
 };
-const _hoisted_2 = { class: "space-y-1" };
+const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = {
+  key: 0,
+  class: "px-3 pb-1 pt-3"
+};
+const _hoisted_4 = { class: "flex h-9 items-center gap-3 px-3" };
+const _hoisted_5 = {
   key: 0,
   class: "flex flex-col gap-0.5"
 };
-const _hoisted_4 = {
+const _hoisted_6 = {
   key: 0,
   class: "px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
 };
-const _hoisted_5 = {
+const _hoisted_7 = {
   key: 0,
   class: "flex flex-col gap-0.5"
 };
-const _hoisted_6 = {
+const _hoisted_8 = {
   key: 0,
   class: "mx-3 mb-1 border-t border-line"
 };
-const _hoisted_7 = { class: "min-w-0 flex-1 truncate text-left" };
-const _hoisted_8 = {
+const _hoisted_9 = { class: "min-w-0 flex-1 truncate text-left" };
+const _hoisted_10 = {
   key: 2,
   class: "px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
 };
@@ -49,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     itemActive: {},
     loading: { type: Boolean },
     skeletonRows: { default: 6 },
-    skeletonHeader: { type: Boolean, default: true },
+    skeletonHeader: { type: Boolean, default: false },
     collapsedKeys: { default: () => [] },
     hoverFollow: { type: Boolean, default: false },
     compact: { type: Boolean },
@@ -172,13 +177,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (item.children?.length && !item.to && !item.href) toggle(item);
       emit("activate", item);
     }
+    const SKELETON_WIDTHS = ["55%", "70%", "45%", "62%", "50%", "68%"];
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex min-h-0 flex-1 flex-col gap-4"
     );
     return (_ctx, _cache) => {
       return __props.loading ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
         key: 0,
-        class: unref(rootClass)
+        class: [unref(rootClass), "overflow-hidden"]
       }, unref(rest)), {
         default: withCtx(() => [
           __props.skeletonHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[1] || (_cache[1] = [
@@ -190,10 +196,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.skeletonRows, (n) => {
-              return openBlock(), createElementBlock("div", {
-                key: n,
-                class: "lp-skeleton-item h-9 rounded-control bg-surface-soft"
-              });
+              return openBlock(), createElementBlock(Fragment, { key: n }, [
+                n === 4 ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[2] || (_cache[2] = [
+                  createElementVNode("div", { class: "lp-skeleton-item h-2.5 w-20 rounded-small bg-surface-soft/60" }, null, -1)
+                ])])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_4, [
+                  _cache[3] || (_cache[3] = createElementVNode("div", { class: "lp-skeleton-item size-4 shrink-0 rounded-small bg-surface-soft" }, null, -1)),
+                  createElementVNode("div", {
+                    class: "lp-skeleton-item h-3 rounded-small bg-surface-soft",
+                    style: normalizeStyle({ width: SKELETON_WIDTHS[(n - 1) % SKELETON_WIDTHS.length] })
+                  }, null, 4)
+                ])
+              ], 64);
             }), 128))
           ])
         ]),
@@ -209,8 +223,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "contents",
             onKeydown: onKey
           }, [
-            __props.pinned.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
-              !__props.compact ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.labels.pinned), 1)) : createCommentVNode("", true),
+            __props.pinned.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              !__props.compact ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.labels.pinned), 1)) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pinned, (item) => {
                 return openBlock(), createBlock(_sfc_main$3, {
                   key: `pinned:${item.id}`,
@@ -230,7 +244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               return openBlock(), createElementBlock(Fragment, {
                 key: sectionKey(section) || si
               }, [
-                __props.compact && section.collapsible && section.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                __props.compact && section.collapsible && section.title ? (openBlock(), createElementBlock("div", _hoisted_7, [
                   createVNode(_sfc_main$3, {
                     item: sectionItem(section),
                     active: false,
@@ -252,7 +266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "onUpdate:open": (o) => emit("toggle-section", sectionKey(section), !o)
                 }, {
                   default: withCtx(() => [
-                    __props.compact && (si > 0 || __props.pinned.length) ? (openBlock(), createElementBlock("div", _hoisted_6)) : !__props.compact && section.title && section.collapsible ? (openBlock(), createBlock(unref(CollapsibleTrigger), {
+                    __props.compact && (si > 0 || __props.pinned.length) ? (openBlock(), createElementBlock("div", _hoisted_8)) : !__props.compact && section.title && section.collapsible ? (openBlock(), createBlock(unref(CollapsibleTrigger), {
                       key: 1,
                       "data-lp-nav-row": "",
                       class: "group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-ink/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
@@ -264,7 +278,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           size: 14,
                           class: "shrink-0"
                         }, null, 8, ["name"])) : createCommentVNode("", true),
-                        createElementVNode("span", _hoisted_7, toDisplayString(section.title), 1),
+                        createElementVNode("span", _hoisted_9, toDisplayString(section.title), 1),
                         section.items.some(unref(waiting)) ? (openBlock(), createElementBlock("span", {
                           key: 1,
                           class: normalizeClass(["size-1.5 shrink-0 rounded-full bg-brand transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none", isOpen(section) ? "opacity-0" : "opacity-100"])
@@ -286,7 +300,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         })
                       ]),
                       _: 2
-                    }, 1024)) : !__props.compact && section.title ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(section.title), 1)) : createCommentVNode("", true),
+                    }, 1024)) : !__props.compact && section.title ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(section.title), 1)) : createCommentVNode("", true),
                     createVNode(unref(CollapsibleContent), { class: "flex flex-col gap-0.5 overflow-hidden data-[state=open]:animate-[collapsible-down_260ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-emphasized)] motion-reduce:animate-none" }, {
                       default: withCtx(() => [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-xEBmGV78.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-DlpQierx.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-DVXAF-DG.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-BFjiHWbr.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-BIhusppV.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-BKhVDsMt.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-CFcI7--7.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-DbCap8z1.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTabs.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent, computed, ref, watch, nextTick, useId, openBlock, createBlock, unref, withCtx, resolveDynamicComponent, mergeProps, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
+import { defineComponent, computed, ref, watch, nextTick, onMounted, useId, openBlock, createBlock, unref, withCtx, resolveDynamicComponent, mergeProps, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
 import { isHTMLElement } from "../composables/realm.js";
 import { usePaletteScope, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useStepHistory } from "../composables/useOverlayHistory.js";
 import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-DEFirphS.js";
@@ -11,7 +12,7 @@ import { _ as _sfc_main$3 } from "../chunks/LpTabFace-uoZgD_SN.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollStrip-D4tsOfAQ.js";
 import { pickTab, BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpTabs-7yQjX2ih.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
@@ -47,9 +48,13 @@ import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineC
     const strip = ref(null);
     const Passthrough = (_, { slots }) => slots.default?.();
     const list = ref(null);
-    watch(current, () => {
-      void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')));
-    });
+    function revealActive(smooth) {
+      if (bottom.value) return;
+      strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]'), { smooth });
+    }
+    watch(current, () => void nextTick(() => revealActive(true)));
+    onMounted(() => requestAnimationFrame(() => revealActive(false)));
+    useResizeObserver(() => strip.value?.scroller, () => revealActive(false));
     function holdMousePick(event) {
       if (event.button !== 0 || event.ctrlKey || bottom.value) return;
       if (!isHTMLElement(event.target) || !event.target.closest('[role="tab"]')) return;
@@ -224,7 +229,7 @@ import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineC
     };
   }
 });
-const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43a45129"]]);
+const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-60b1eda3"]]);
 export {
   LpTabs as default
 };

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-V0Lybi10.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-43WHmTsM.js";
 import { _ as _5 } from "./chunks/LpAlert-Q0h7Gucu.js";
-import { _ as _6 } from "./chunks/LpAppShell-xEBmGV78.js";
+import { _ as _6 } from "./chunks/LpAppShell-DlpQierx.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-YPxAPHEo.js";
 import { _ as _8 } from "./chunks/LpAvatar-CfLBqlY1.js";
 import { _ as _9 } from "./chunks/LpBadge-Bh5roBr_.js";
@@ -65,7 +65,7 @@ import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _39 } from "./chunks/LpMediaGallery-CTejKF2-.js";
 import { _ as _40 } from "./chunks/LpModal-D1E7rQzw.js";
-import { _ as _41 } from "./chunks/LpModalNav-DVXAF-DG.js";
+import { _ as _41 } from "./chunks/LpModalNav-BFjiHWbr.js";
 import { _ as _42 } from "./chunks/LpNotificationBell-KRgdRZs-.js";
 import { _ as _43 } from "./chunks/LpNotificationFeed-CMGYU8c-.js";
 import { _ as _44 } from "./chunks/LpNumberField-C0LSu-tl.js";
@@ -94,7 +94,7 @@ import { _ as _64 } from "./chunks/LpShift-DAgS_d2x.js";
 import { _ as _65 } from "./chunks/LpSwap-M7nFeW3C.js";
 import { _ as _66 } from "./chunks/LpHintExample-YzCXiSUp.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _67 } from "./chunks/LpSidebar-BIhusppV.js";
+import { _ as _67 } from "./chunks/LpSidebar-BKhVDsMt.js";
 import { _ as _68 } from "./chunks/LpContextSwitcher-COw6GHPW.js";
 import { _ as _69 } from "./chunks/LpSkeleton-leTl53V9.js";
 import { _ as _70 } from "./chunks/LpSlider-DUd4gXnw.js";

package/package.json

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

package/src/components/LpSidebar.vue

@@ -185,7 +185,7 @@ const props = withDefaults(
   }>(),
   {
     skeletonRows: 6,
-    skeletonHeader: true,
+    skeletonHeader: false,
     responsive: false,
     mobileBreakpoint: "md",
     divider: true,

package/src/components/LpSidebarNav.vue

@@ -56,7 +56,7 @@ const props = withDefaults(
     previewDelay?: number
     labels: { pinned: string; pin: string; unpin: string; expand: string }
   }>(),
-  { skeletonRows: 6, skeletonHeader: true, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
+  { skeletonRows: 6, skeletonHeader: false, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
 )
 
 const emit = defineEmits<{
@@ -212,6 +212,8 @@ function activate(item: SidebarItem) {
 }
 
 // The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
+const SKELETON_WIDTHS = ["55%", "70%", "45%", "62%", "50%", "68%"]
+
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-h-0 flex-1 flex-col gap-4",
 )
@@ -222,7 +224,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
        LpSkeleton wrapper so it pulses in phase with every other placeholder
        on the page and stops under reduced motion. -->
   <LpSkeleton v-if="loading"
-    :class="rootClass"
+    :class="[rootClass, 'overflow-hidden']"
     v-bind="rest">
     <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
       <div class="lp-skeleton-item size-10 shrink-0 rounded-pill bg-surface-soft" />
@@ -231,12 +233,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <div class="lp-skeleton-item h-3 w-16 rounded-small bg-surface-soft/60" />
       </div>
     </div>
-    <div class="space-y-1">
-      <div
-        v-for="n in skeletonRows"
-        :key="n"
-        class="lp-skeleton-item h-9 rounded-control bg-surface-soft"
-      />
+    <!-- Rows in the shape of the items they stand in for: an icon and a label
+         of uneven width at the item's own height and padding, with a section
+         label after the first three. A run of full-width bars read as a list
+         of buttons, not as navigation. -->
+    <div class="flex flex-col gap-1">
+      <template v-for="n in skeletonRows" :key="n">
+        <div v-if="n === 4" class="px-3 pb-1 pt-3">
+          <div class="lp-skeleton-item h-2.5 w-20 rounded-small bg-surface-soft/60" />
+        </div>
+        <div class="flex h-9 items-center gap-3 px-3">
+          <div class="lp-skeleton-item size-4 shrink-0 rounded-small bg-surface-soft" />
+          <div class="lp-skeleton-item h-3 rounded-small bg-surface-soft" :style="{ width: SKELETON_WIDTHS[(n - 1) % SKELETON_WIDTHS.length] }" />
+        </div>
+      </template>
     </div>
   </LpSkeleton>
 

package/src/components/LpTabs.vue

@@ -3,7 +3,8 @@ import { isHTMLElement } from "../composables/useView"
 import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, nextTick, ref, useId, watch, type FunctionalComponent } from "vue"
+import { computed, nextTick, onMounted, ref, useId, watch, type FunctionalComponent } from "vue"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { usePillTransition } from "../composables/usePillTransition"
 import { useStepHistory } from "../composables/useOverlayHistory"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
@@ -106,13 +107,21 @@ watch(
 // A row wider than its container scrolls sideways (a phone, a narrow card)
 // instead of wrapping each label onto two lines. LpScrollStrip lets a mouse
 // reach the tabs off to the side (wheel, drag, edge buttons), and the active
-// tab is brought into view whenever it changes, including from outside.
+// tab is brought into view whenever it changes, including from outside, and
+// also on mount and when the row resizes: a tab picked by the address before
+// the first paint, or left beyond the edge by a narrower window, would
+// otherwise sit off-screen with nothing saying which section is open. Those
+// two jump; only a change the person can follow eases.
 const strip = ref<InstanceType<typeof LpScrollStrip> | null>(null)
 const Passthrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 const list = ref<{ $el: HTMLElement } | null>(null)
-watch(current, () => {
-  void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')))
-})
+function revealActive(smooth: boolean) {
+  if (bottom.value) return
+  strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]'), { smooth })
+}
+watch(current, () => void nextTick(() => revealActive(true)))
+onMounted(() => requestAnimationFrame(() => revealActive(false)))
+useResizeObserver(() => strip.value?.scroller, () => revealActive(false))
 
 /*
  * reka selects a tab on mousedown, so a press meant to drag the row would

package/dist/assets/LpTabs-D7EyG21l.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-43a45129],
-.lp-tab-badge-leave-active[data-v-43a45129] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-43a45129],
-.lp-tab-badge-leave-to[data-v-43a45129] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-43a45129],
-  .lp-tab-badge-leave-active[data-v-43a45129] {
-    transition: none;
-}
-}