fix: allow usage of tabs without panels

Author: graphieros

app/components/Package/TimelineChart.vue

@@ -450,12 +450,12 @@ const indexSelection = computed(() => {
 <template>
   <div style="width: 100%" class="font-mono border-b border-border">
     <div class="mt-4 flex flex-row flex-wrap items-center justify-between gap-4">
-      <TabRoot v-model="activeTab" default-value="totalSize" id-prefix="timeline">
+      <TabRoot v-model="activeTab" default-value="totalSize">
         <TabList :ariaLabel="$t('package.timeline.chart.tab_aria_label')">
-          <TabItem value="totalSize" icon="i-lucide:package-open">
+          <TabItem value="totalSize" icon="i-lucide:package-open" :controls-panel="false">
             {{ $t('package.stats.install_size') }}
           </TabItem>
-          <TabItem value="dependencyCount" icon="i-lucide:network">
+          <TabItem value="dependencyCount" icon="i-lucide:network" :controls-panel="false">
             {{ $t('compare.dependencies') }}
           </TabItem>
         </TabList>

app/components/Tab/Item.vue

@@ -8,10 +8,12 @@ const props = withDefaults(
     value: string
     icon?: IconClass
     tabId?: string
+    controlsPanel?: boolean
     variant?: 'primary' | 'secondary'
     size?: 'sm' | 'md'
   }>(),
   {
+    controlsPanel: true,
     variant: 'secondary',
     size: 'md',
   },
@@ -22,12 +24,13 @@ const attrs = useAttrs()
 const selected = inject<WritableComputedRef<string>>('tabs-selected')
 const getTabId = inject<(value: string) => string>('tabs-tab-id')
 const getPanelId = inject<(value: string) => string>('tabs-panel-id')
+
 if (!selected || !getTabId || !getPanelId) {
   throw new Error('TabItem must be used inside a TabRoot component')
 }
 const isSelected = computed(() => selected.value === props.value)
 const resolvedTabId = computed(() => props.tabId ?? getTabId(props.value))
-const resolvedPanelId = computed(() => getPanelId(props.value))
+const resolvedPanelId = computed(() => (props.controlsPanel ? getPanelId(props.value) : undefined))
 const select = () => {
   selected.value = props.value
 }